Question

我需要在循环中更改页面的背景颜色。所以我有这样的事情：

.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？

提前致谢。

Answer 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>

嗯，结果不好看，但你明白了。

Answer 2

我认为您正在正确使用背景，但为了平滑过渡，请使用类似动画的内容。

例如：在animation_in，animation_out等转换中使用动画。也可以尝试转换计时功能，如

{
transition-timing-function: ease-in-out;
}

了解更多http://www.the-art-of-web.com/css/timing-function/。

CSS3背景颜色改变线性无限动画

2 个答案: