我正在制作旋转容器。 实际上我已经做过..但是有问题:背景图片加载了一半(容器加载了一半)。
代码是:
@keyframes rotate-ornament {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes rotate-ornament {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate-ornament {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-ms-keyframes rotate-ornament {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.ornament {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;
z-index: -1;
}
.ornament {
background:transparent url('images/ornament.png') no-repeat;
background-size: 100%;
z-index: -1;
-moz-animation: rotate-ornament 100s linear infinite;
-ms-animation: rotate-ornament 100s linear infinite;
-o-animation: rotate-ornament 100s linear infinite;
-webkit-animation: rotate-ornament 100s linear infinite;
animation: rotate-ornament 100s linear infinite;
}
提前致谢!
答案 0 :(得分:2)
问题是height:100%
我将div“.ornament”(通过chrome检查器)的高度更改为背景图像的实际高度(1386px),并且工作正常。