当前位置： 移动技术网 > IT编程>网页制作>HTML > 使用css3实现简单的轮播图

使用css3实现简单的轮播图

2020年07月22日  | 移动技术网IT编程  | 我要评论

利用css3做简单的轮播图

轮播图广泛出现在购物等网站上，下面我们利用css3做简单的轮播图。

看效果

在这里插入图片描述

HTML代码

	<div class="container">
		<div class="images">
			<img src="gtr.jpg">
			<img src="evo.jpg">
			<img src="sti.jpg">
		</div>
	</div>

css代码

.container{
			width: 500px;
			height: 350px;
			margin: 20vh auto 0;
			overflow: hidden; /*溢出隐藏，让不在div的图片先隐藏 */
		}
		.images{
			width: 1500px; /*此宽度为：图片的的宽度 * 图片的数量 */
			height: 350px;
			animation: move 10s infinite;
		}
		/* 设置图片的宽度和高度和外层div一样的宽高 */
		img{
			width: 500px;
			height: 350px;
			float: left;
		}
		@keyframes move{
			0%,25%{
				margin-left: 0px;
			}
			35%,70%{
				margin-left: -500px;
			}
			80%,100%{
				margin-left: -1000px;
			}
		}

本文地址：https://blog.csdn.net/weixin_48165407/article/details/107497938

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网