我正在尝试使用 Body 标签制作一个 css 背景动画。这是代码
body
{
animation-name:mymove;
animation-duration:5s;
animation-direction:alternate;
animation-iteration-count:infinite;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}
@keyframes mymove
{
from {background-image:url('Space.png');}
to {background:blue;}
}
@-webkit-keyframes mymove
{
from {background-image:url('Space.png');}
to {background:blue;}
}
但是当我使用它时，背景只是从白色变为蓝色。有没有图像不显示的原因？顺便说一句，图像目录是正确的，如果我只是将它设置为背景图像，它就可以工作。
最佳答案
背景图像不是可以设置动画的属性 - 您不能对该属性进行补间。因此你不能将它与关键帧动画一起使用。而是尝试此代码-
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{background:url('Space.png');}
#frame
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100%; /* or the height of webpage is px */
width: 100%; /* or the width of webpage is px */
animation-name:mymove;
animation-duration:5s;
animation-direction:alternate;
animation-iteration-count:infinite;
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
}
@keyframes mymove
{
from {background:transparent;}
to {background:blue;}
}
@-webkit-keyframes mymove
{
from {background:transparent;}
to {background:blue;}
}
</style>
</head>
<body>
<div id="frame">
<--- Webpage contents --->
</div>
</body>
</html>
关于image - CSS 背景图像动画不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17377208/