效果预览:
实现思路:
类似于:h5+css3+js之移动端轮播图
将存放所有图片的容易按照一定的时间在X轴进行移动,但是此处使用的是纯CSS实现,利用动画animation
定义每一帧的动画,在每一帧的动画中沿着X轴进行移动
实现代码:
html:
<main>
<section>
<div>
<img src="/images/1.jpg" alt="">
</div>
<div>
<img src="/images/2.PNG" alt="">
</div>
<div>
<img src="/images/4.jpg" alt="">
</div>
<div>
<img src="/images/dog.jpg" alt="">
</div>
<!-- 图片索引-->
</section>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</main>
css
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
display: grid;
grid-template: 1fr/1fr;
justify-items: center;
align-items: center;
background: #353b48;
}
main {
width: 400px;
height: 200px;
overflow: hidden;
position: relative;
}
/*存放所有图片 控制整体图片的移动*/
section {
width: 1600px;
height: 200px;
display: grid;
grid-template: 1fr/repeat(4,1fr);
animation-name: move;
animation-duration: 4s;
/*每张图占1s 且等1s结束之后再移动*/
animation-timing-function: steps(4,end);
/*重复播放*/
animation-iteration-count: infinite;
position: relative;
}
div {
width: 400px;
height: 200px;
}
img {
width: 100%;
}
ul {
width: 200px;
list-style-type: none;
position: absolute;
color: #fff;
bottom: 0;
display: grid;
grid-template: 1fr/repeat(4,1fr);
z-index: 2;
}
ul li {
background-color: rgba(0,0,0,.5);
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
grid-template: 1fr/1fr;
justify-items: center;
align-items: center;
position: relative;
}
ul li:first-child::after {
content: "";
width: 30px;
height: 30px;
background-color: #e84118;
border-radius: 50%;
position: absolute;
z-index: -1;
animation-name: move_li;
animation-duration: 4s;
animation-timing-function: steps(4,end);
animation-iteration-count: infinite;
}
section:hover,section:hover+ul>li::after{
animation-play-state: paused;
}
@keyframes move {
to {
transform: translateX(-1600px);
}
}
/*小圆点动画*/
@keyframes move_li {
to {
transform: translateX(200px);
}
}