HTML+CSS3制作轮播图

最新推荐文章于 2024-06-26 20:04:17 发布

NY农

最新推荐文章于 2024-06-26 20:04:17 发布

阅读量250

点赞数

分类专栏：面试题文章标签： css3

本文链接：https://blog.csdn.net/weixin_42475435/article/details/119571716

版权

面试题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先我们不用到JS制作轮播图的话，肯定是离不开我们的CSS3动画效果的

这里用到了我们的animation属性，配合@keyframes来实现我们的一个动画轮播图效果

代码如下：

<div class="box">
	<ul class="list">
		<li><img class="auto-img" src="img/1.jpg" ></li>
		<li><img class="auto-img" src="img/2.jpg" ></li>
		<li><img class="auto-img" src="img/3.jpg" ></li>
		<li><img class="auto-img" src="img/4.jpg" ></li>
		<li><img class="auto-img" src="img/5.jpg" ></li>
	</ul>
</div>

body {
    margin: 0;
	padding: 0;
}
.box {
	margin: 100px auto 0;
	width: 750px;
	height: 750px;
	overflow: hidden;
}
.list {
	width: 3750px;
	height: 750px;
	list-style-type: none;
	padding: 0;
	margin: 0;
	animation: animate 5s linear;
}
.list>li {
	width: 750px;
	float: left;
}
		
.auto-img {
	display: block;
	width: 100%;
}
		
@keyframes animate{
	0% {
		transform: translateX(0);
	}
	12.5% {
		transform: translateX(-375px);
	}
	25% {
		transform: translateX(-375px);
	}
	37.5% {
		transform: translateX(-750px);
	}
	50% {
		transform: translateX(-750px);
	}
	62.5% {
		transform: translateX(-1125px);
	}
	75% {
		transform: translateX(-1125px);
	}
	87.5% {
		transform: translateX(-1500px);
	}
	100% {
		transform: translateX(-1500px);
	}
}