首先,我是编程的初学者。
我会感谢某人的帮助。我有一个背景我想改变关键帧图片和颜色。它有效,但是当图片发生变化时,我会遇到一些不必要的抖动问题。我没有使用javascript这个。
section#home{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
animation: bgswap 50s;
-webkit-animation: bgswap 50s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
.BackColorChange {
width: 100vw;
height: 100vh;
animation: colorchange 25s;
-webkit-animation: colorchange 25s;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes colorchange
{
0% {background: rgba(255,252,252,.75);}
25% {background: rgba(224,214,204,.5);}
50% {background: rgba(209,195,182,0);}
75% {background: rgba(224,214,204,.5);}
100% {background: rgba(255,252,252,.75);}
}
@-webkit-keyframes colorchange
{
0% {background: rgba(255,252,252,.75);}
25% {background: rgba(224,214,204,.5);}
50% {background: rgba(209,195,182,0);}
75% {background: rgba(224,214,204,.5);}
100% {background: rgba(255,252,252,.75);}
}
@keyframes bgswap {
0% {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
20% {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
40% {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
60% {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
80% {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
100% {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
}
@-webkit-keyframes bgswap {
0% {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
20% {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
40% {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
60% {background-image: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-57593.jpg");}
80% {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
100% {background-image: url("http://getwallpapers.com/wallpaper/full/2/1/b/431542.jpg");}
}