Question

您好我尝试了很多次并搜索Google找不到最佳解决方案

你可以帮我吗

我的问题是如何在html

中的body标签中重复所有时间的动画背景图像

我的代码就是这个

HTML

<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

的CSS

/*Lets start with the flower animationr*/
.loader {
position:absolute;
left:0;
right:0;
top:0;
z-index:-1;
}
.loader span {
display: inline-block;
width: 141px;
height: 191px;
margin: -280px 40px 54px -34px;
background:url("http://ppus.techletsolutions.com/media/wysiwyg/home/bg-leaves-19may14.png");
/*background:url("http://premiumcoding.com/CSSTricks/fallingLeaves/leaf.png");*/
-webkit-animation: loader 25s infinite  linear;
-moz-animation: loader 25s infinite  linear;
}
.loader span:nth-child(5n+5) {
 -webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
}
.loader span:nth-child(3n+2) { 
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
.loader span:nth-child(2n+5) { 
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
}

.loader span:nth-child(3n+10) { 
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
}
.loader span:nth-child(7n+2) {
 -webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
}
.loader span:nth-child(4n+5) {
 -webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
}
.loader span:nth-child(3n+7) { 
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
}
@-webkit-keyframes loader {
0% {
width: 141px;
height: 191px;
opacity: 1;
 -webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
width: 141px;
height: 191px;
opacity: 1;
 -webkit-transform: translate(0px, 900px) rotateZ(270deg);
}
100% {
width: 141px;
height: 191px;
opacity: 0;
 -webkit-transform: translate(0px, 1100px) rotateZ(360deg);
}
}
@-moz-keyframes loader {
0% {
width: 141px;
height: 191px;
opacity: 1;
-moz-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
width: 141px;
height: 191px;
opacity: 1;
-moz-transform: transform: translate(0px, 900px) rotateZ(270deg);
}
100% {
width: 141px;
height: 191px;
opacity: 0;
-moz-transform: translate(0px, 1100px) rotateZ(360deg);
}
}
/* Lets start with the flower animationr*/

Demo Link

Answer 1

尝试循环它，以便最后的项目最终处于起始位置 0％开始，99％结束，100％开始，做一些css样式不显示99-100阶段。

0% {
width: 141px;
height: 191px;
opacity: 1;
 -webkit-transform: translate(0, 0px) rotateZ(0deg);
}
99% {
width: 141px;
height: 191px;
opacity: 0;
 -webkit-transform: translate(0px, 600px) rotateZ(360deg);
}
100% {
width: 141px;
height: 191px;
opacity: 0;
 -webkit-transform: translate(0px, 0px) rotateZ(0deg);
}

http://jsfiddle.net/UUC57/3/ P.S。对不起，我宁愿对此发表评论，但我的声誉低于50 更新：问题只是第79行的原始jsfiddle的错误类型 -moz-transform: transform: translate(0px, 900px) rotateZ(270deg); 2转化尝试http://jsfiddle.net/UUC57/4/

如何在body标签中重复动画背景图片？

1 个答案: