如何使用纯css写简单轮播图

最新推荐文章于 2023-11-04 12:29:48 发布

原创最新推荐文章于 2023-11-04 12:29:48 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了一种使用CSS动画实现图片轮播的方法。通过设置盒子的宽度、高度和溢出隐藏属性，再利用绝对定位和动画关键帧，实现了图片的平滑切换效果。这种方法不需要JavaScript，仅依赖CSS即可完成图片轮播。

首先将图片并排放入盒子中
在这里插入图片描述

隐藏之后
在这里插入图片描述

<style>
	.box{
		width: 100px;
		height: 100px;
		overflow: hidden;	
		position: relative;
}
	.imgs{ //容器盒子
		width: 500px;
		position: absolute;
		animation: oy 10s ease-out infinite alternate
	}
	img{
		width: 100px;
		height: 100px;
		float: left;
}
</style>


 <div class="box">
		<div class="imgs">
			<img src='01.jpg' alt="">
			<img src="02.jpg" alt="">
			<img src="03.jpg" alt="">
			<img src="04.jpg" alt="">
			<img src="05.jpg" alt="">
		</div>
	</div>

普通布局完成接下来加入动画就完工了

@keyframes oy {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/  
        0%,20% {        margin-left: 0px;       }  
        25%,40% {       margin-left: -100px;    }  
        45%,60% {       margin-left: -200px;    }  
        65%,80% {       margin-left: -300px;    }  
        85%,100% {      margin-left: -400px;   }  
   }