1

我试图用 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;}
}

但是当我使用它时，背景会从白色变为蓝色。图片显示不出来有什么原因吗？顺便说一下，如果我将其设置为背景图像，图像目录是正确的并且可以工作。

4

1 回答 1

0

背景图像不是可以动画的属性 - 您不能对属性进行补间。因此，您不能将它与关键帧动画一起使用。而是尝试此代码-

<!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>
于 2013-06-29T06:24:56.213 回答