CSS3 <body> 背景色变化线性无限动画
Posted
技术标签:
【中文标题】CSS3 <body> 背景色变化线性无限动画【英文标题】：CSS3 <body> background-color change linear infinite animation 【发布时间】：2017-06-23 19:19:06 【问题描述】：我需要循环更改页面的背景颜色。所以我有这样的事情：
.bg-changer
animation: bg-img-slider 10s linear infinite;
transition: background 300ms ease-in 200ms;
body
margin: 15px auto;
height: 95vh;
width: 90%;
border: 1px solid silver;
.bg-changer
animation: bg-img-slider 10s linear infinite;
/*transition: background 300ms ease-in 200ms;*/
transition-timing-function: ease-in-out;
transition-duration: 1s;
@keyframes bg-img-slider
0%, 100%
background-image: radial-gradient(silver, snow);
20%
background-image: radial-gradient(#2b5876, #4e4376);
40%
background-image: radial-gradient(#44A08D, #093637);
60%
background-image: radial-gradient(#DD5E89, #F7BB97);
80%
background-image: radial-gradient(#348F50, #56B4D3);
90%
background-image: radial-gradient(#bdc3c7, #2c3e50);
.page-header
padding: 10px 0 5px 15px;
.page-header>h1
padding-bottom: 5px;
border-bottom: 1px solid gray;
.page-header>p
font-size: 85%;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BG</title>
</head>
<body class="bg-changer">
<div class="main-content ">
<div class="page-header">
<h1>Page Title</h1>
<p>This is the tag line</p>
</div>
</div>
</body>
</html>
@keyframes bg-img-slider
0%,
100%
background-image: radial-gradient(silver, snow);
20%
background-image: radial-gradient(#2b5876, #4e4376);
/*animation-timing-function: ease-in;*/
40%
background-image: radial-gradient(#44A08D, #093637);
60%
background-image: radial-gradient(#DD5E89, #F7BB97);
/*animation-timing-function: ease-in;*/
80%
background-image: radial-gradient(#348F50, #56B4D3);
90%
background-image: radial-gradient(#bdc3c7, #2c3e50);
/*animation-timing-function: ease-in;*/
我将bg-changer 类应用于body 标签。它有效，但颜色变化就像一记耳光一样发生。我尝试了几件事以使其更顺畅。我尝试了transition、animation-timing-fuction 和其他一些（也将它们放在关键帧中）。似乎没有任何效果！
请教我以下问题：
首先，很明显，我如何平滑地而不是立即更改正文背景颜色（在每个关键帧 % 上）。 为什么background-color 不起作用？我不得不使用background-image。正确的使用方法是什么——background、background-color、background-image？
提前致谢。
【问题讨论】：
【参考方案1】：渐变是不可动画的。 （唯一的例外是职位）。
背景色是可动画的，但仅限于纯色。
div
width: 200px;
height: 100px;
animation: colors 10s infinite;
@keyframes colors
from background-color: blue;
to background-color: green;
<div></div>如果你想为径向渐变设置动画，你可以通过一些技巧来实现，使用透明度
div
width: 200px;
height: 100px;
animation: colors 2s infinite;
background-image: radial-gradient(circle, transparent, red);
@keyframes colors
from background-color: blue;
to background-color: green;
<div></div>但您仅限于为内部和外部设置动画
更复杂的例子是使用伪元素，并为阴影设置动画
div
width: 200px;
height: 200px;
position: relative;
border: solid 1px red;
overflow: hidden;
div:after
content: "";
width: 300px;
height: 300px;
top: -50px;
left: -50px;
position: absolute;
border-radius: 50%;
animation: colors 3s infinite;
@keyframes colors
from background-color: green;
box-shadow: inset 0px 0px 80px 80px yellow;
to background-color: blue;
box-shadow: inset 0px 0px 80px 100px red;
<div></div>嗯，结果不好看，但你明白了。
【讨论】：
谢谢@vals。好一个！我解决了这个问题：codepen.io/vivekragunathan/pen/XpBgxL 正如你所说的，梯度等效是详尽的，并不令我满意。此外，似乎很难通过 box-shadow 获得吸引人的渐变。【参考方案2】：我认为您正确使用了背景，但为了平滑过渡，请使用动画之类的东西。
例如：在animation_in、animation_out等转场中使用动画。也可以试试转场计时功能
transition-timing-function: ease-in-out;
了解更多http://www.the-art-of-web.com/css/timing-function/。
【讨论】：
我按照您的建议进行了尝试，但似乎不起作用。不知道我错过了什么。在上面的问题中附加了代码片段。可以看看吗？ @VivekRagunathan 我是一只新蜜蜂。我认为它应该是淡入淡出的概念，以实现平滑的过渡。 tympanus.net/codrops/2012/01/02/… 在页面链接的最后，他们还展示了一些示例动画。请尝试一下。以上是关于CSS3 <body> 背景色变化线性无限动画的主要内容，如果未能解决你的问题，请参考以下文章
可以用css3改变复选框的背景色和勾上的颜色吗 一定要用js？