首先,我们先确定HTML结构
<div className="wrapper">
<div class="tech-slideshow">
<div class="mover-1">
<img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774199移动-首页999_03.jpg" />
<img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774198移动-首页2_03.jpg" />
</div>
<div class="mover-2">
<img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774199移动-首页999_03.jpg" />
<img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774198移动-首页2_03.jpg" />
</div>
</div>
</div>
然后,我们还需要确定CSS
.tech-slideshow {
height: 2rem;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > .mover-1 {
height: 2rem;
width: 1388px;
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > .mover-2 {
height: 2rem;
width: 1388px;
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 5s linear infinite;
}
@keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}