Question

我正在尝试用CSS创建一个无休止的滚动幻灯片。

我遇到的唯一问题是，一旦动画完成其循环的一个阶段，如何让第一个元素从右侧滑回...而不是因为动画重新启动而突然出现。

<html>
<head>
<style>

*{margin:0 auto;overflow:hidden;}


.pic {
position:absolute;
width:100%;
height:100%;
}

#one{
background:rgba(23,230,120,0.9);
animation: scroll1 4s infinite;
}

#two{
background:rgba(230,23,180,0.9);
right:-100%;
animation: scroll 4s infinite;
}

#three{
background:rgba(23,230,220,0.9);
right:-200%;
animation: scroll 4s infinite;
}

#four{
background:rgba(230,80,220,0.9);
right:-300%;
animation: scroll 4s infinite;
}

#contain{
position:absolute;
width:400%;
height:100%;
left:0;
}

@keyframes scroll
{
from {left:0;}
20% {left:0;}
25% {left:-100%;}
45% {left:-100%;}
50% {left:-200%;}
70% {left:-200%;}
75% {left:-300%;}
to {left:-300%;}
}

@keyframes scroll1
{
from {left:0;}
20% {left:0;}
25% {left:-100%;opacity:1;}
45% {left:-100%;opacity:0;}
50% {left:100%;opacity:0;}
to {left:100%;opacity:1;}
}



</style>
<body>

<div id="contain" class="pic">
<div id="one" class="pic"></div>
<div id="two" class="pic"></div>
<div id="three" class="pic"></div>
<div id="four" class="pic"></div>
</div>



</body>
</html>

Answer 1

经过几个小时搞乱div尺寸和时间后，我找到了解决方案！没有太多信息，但我使用了this site的想法：并简化了一下。

<html>
<head>
<script>
</script>
<style>

*{margin:0 auto;overflow:hidden;}

body{
background:black;
}

.pic {
position:absolute;
width:100%;
height:100%;
animation: scroll 10s infinite;
}

#one{
background:rgba(23,230,120,0.9);
animation: scroll1 10s infinite;
}

#two{
background:rgba(230,23,180,0.9);
right:-200%;
}

#three{
background:rgba(23,230,220,0.9);
right:-400%;
}

#four{
background:rgba(230,80,220,0.9);
right:-600%;
}

#contain{
position:absolute;
/*top:100px;*/
width:100%;
height:100%;
left:0;
}














@keyframes scroll
{
from {left:0;}
20% {left:0;}
25% {left:-200%;}
45% {left:-200%;}
50% {left:-400%;}
70% {left:-400%;}
75% {left:-600%;}
95% {left:-600%;}
to {left:-800%;}
}

@keyframes scroll1 {
0%   {left:0;}
20%  {left:0; z-index:1;}
25%  {left:-100%; z-index:0; opacity:1;}
26%  {left:-100%; z-index:-1; opacity:0;}
27%  {left:100%; z-index:-1;}
70%  {left:100%; z-index:10;opacity:1;}
95%  {left:100%;}
100% {left:0;}
}




</style>
<body>

<div id="contain">
<div id="one" class="pic"></div>
<div id="two" class="pic"></div>
<div id="three" class="pic"></div>
<div id="four" class="pic"></div>
</div>




</body>
</html>

我恳请您亲自试用这段代码！

无尽的滚动幻灯片动画

1 个答案: