CSS3< body>背景颜色变化线性无限动画 [英] CSS3 <body> background-color change linear infinite animation
问题描述
我需要循环更改页面的背景颜色.所以我有这样的东西:
I need to change the background color of my page in a loop. So I have something like this:
.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 和其他一些功能(还将它们放置在关键帧中).似乎什么都没用！
I apply the class bg-changer to the body tag. It works but the color change happens like a slap. I tried several things to make it smoother. I tried the transition, animation-timing-fuction and a few others (also placed them in the keyframes). Nothing seems to work!
请教我以下问题:
- 首先，显然，我如何平滑而不是立即(在每个关键帧％上)更改主体背景颜色.
- 为什么
background-color不起作用?我不得不使用background-image.什么是正确的使用方法-background，background-color，background-image?
- First, obviously, how do I change body background color smoothly rather than instantly (on every keyframe %).
- Why does
background-colornot work? I had to usebackground-image. What is the correct way to use -background,background-color,background-image?
谢谢.
推荐答案
渐变无法设置动画.(唯一的例外是职位).
A gradient is not animatable. (The only exception being the position).
背景色是可以动画的，但仅限于纯色.
A background-color is animatable, but is limited to a solid color.
div {
width: 200px;
height: 100px;
animation: colors 10s infinite;
}
@keyframes colors {
from {background-color: blue;}
to {background-color: green;}
}<div></div>如果要设置径向渐变的动画，可以使用透明度以某种方式来实现它
If you want to animate a radial gradient, you can do it somehow with a trick, using a transparency
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>但是您只能对外部的内部进行动画处理
But you are limited to animating the inner part, of the outer part
一个更精致的示例是使用伪元素，并对阴影进行动画处理
A more elaborate example would be to use a pseudo element, and animate the shadow
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>好吧，结果看起来并不好看，但您明白了.
Well, the result isn't good looking, but you get the idea.
这篇关于CSS3< body>背景颜色变化线性无限动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
