我想使用CSS3(以及稍后的Sass)制作不断移动的幻灯片。我有九个图像和一个宽度为850像素的蒙版div,我知道如何将第一个图像动画化,但我不知道如何计算其余图像的值。
我在Smashing Magazine和hugogiraudel.com上找到了很好的教程,但这是静态状态,我不知道如何使其仍然移动。
如果有人能帮助我理解这一点以及如何使用SASS,则会非常好。
这里是我完成的CodePen。 以下是代码:
我在Smashing Magazine和hugogiraudel.com上找到了很好的教程,但这是静态状态,我不知道如何使其仍然移动。
如果有人能帮助我理解这一点以及如何使用SASS,则会非常好。
这里是我完成的CodePen。 以下是代码:
#slider {
width: 850px;
margin: 0 150px;
}
.ruler {
display: flex;
flex-flow: row nowrap;
border: 1px solid black;
}
.u10 {
flex: 1 1 0;
width: 10%;
text-align: center;
z-index: 0;
}
.u10:nth-child(even) {
background-color: white;
}
.u10:nth-child(odd) {
background-color: gray;
}
ul {
list-style: outside none none;
position: relative;
height: 100px;
}
ul:after {
border: 1px solid black;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
content: "";
}
li {
position: absolute;
}
.img1 {
left: -120px;
}
.img2 {
left: 0px;
}
.img3 {
left: 120px;
}
.img4 {
left: 240px;
}
.img5 {
left: 360px;
}
.img6 {
left: 480px;
}
.img7 {
left: 600px;
}
.img8 {
left: 720px;
}
.img9 {
left: 840px;
}
.animation {
animation: 10s linear 0s infinite running cycle1;
}
@keyframes cycle1 {
0% {
left: -120px;
opacity: 0;
}
1% {
left: -120px;
opacity: 1;
}
99% {
left: 840px;
opacity: 1;
}
100% {
left: -120px;
opacity: 0;
}
}
<div id="slider">
<div class="ruler">
<span class="u10">10%</span>
<span class="u10">20%</span>
<span class="u10">30%</span>
<span class="u10">40%</span>
<span class="u10">50%</span>
<span class="u10">60%</span>
<span class="u10">70%</span>
<span class="u10">80%</span>
<span class="u10">90%</span>
<span class="u10">100%</span>
</div>
<ul>
<li class="image-wrapper img1">
<img src="http://placehold.it/100?text=1" alt="">
</li>
<li class="image-wrapper img2">
<img src="http://placehold.it/100?text=2" alt="">
</li>
<li class="image-wrapper img3">
<img src="http://placehold.it/100?text=3" alt="">
</li>
<li class="image-wrapper img4">
<img src="http://placehold.it/100?text=4" alt="">
</li>
<li class="image-wrapper img5">
<img src="http://placehold.it/100?text=5" alt="">
</li>
<li class="image-wrapper img6">
<img src="http://placehold.it/100?text=6" alt="">
</li>
<li class="image-wrapper img7">
<img src="http://placehold.it/100?text=7" alt="">
</li>
<li class="image-wrapper img8">
<img src="http://placehold.it/100?text=8" alt="">
</li>
<li class="image-wrapper img9">
<img src="http://placehold.it/100?text=9" alt="">
</li>
</ul>
<ul>
<li class="image-wrapper img1 animation">
<img src="http://placehold.it/100?text=1" alt="">
</li>
</ul>
</div>