纯CSS实现自动轮播 提高代码效率
看到效果后是不是也想自己动手做一个 let’s go!!!
CSS部分
<style type="text/css">
body{
margin: 0; /*外边距为0 网页兼容性*/
padding: 0; /*内边距为0 网页兼容性*/
}
.img1{
width: 500px; /*img宽度*/
height: 300px; /*img高度*/
background-color:blue;
/*对img1添加背景色 使之可见*/
margin: 100px auto 0;
/*设置img1在网页中的位置 上 右 下 左*/
overflow: hidden;
/*对超出img1外多余的部分隐藏*/
}
ul{/*无序列表默认存在内外边距 需要去掉*/
margin: 0;
padding: 0;
list-style-type: none;
/*取消无序列表内的disc（小黑圆点）*/
}
.img ul:after{ /*清除浮动 防止父级高度塌陷*/
content: "";
display: block;
clear:both;
}
.img1 ul{
width:2000px;
background-size:500px 300px;
transform: translate(0px);
animation: move 9s infinite;
/*动画：移动 9s 不停地*/
}
.img1 ul li{
width:500px;
height:300px;
background-size: 500px 300px;
float:left;
/*float:left如果不清除，很容易对下面的
div造成显示错位*/
}
.img1 ul .pic-1{
background-image: url(img/o1.jpg); /*插入图片*/
}
.img1 ul .pic-2{
background-image: url(img/o2.jpg); /*插入图片*/
}
.img1 ul .pic-3{
background-image: url(img/o3.jpg); /*插入图片*/
}
.img1 ul .pic-4{
background-image: url(img/o4.jpg); /*插入图片*/
}
@keyframes move{ /*关键动画帧 0%-100%*/
0%{
transform: translate(0px);
}
35%{
transform: translate(-500px);
}
75%{
transform: translate(-1000px);
}
100%{
transform: translate(-1500px);
}
}
</style>
html部分
<body>
<h1 align="center">当当伟和小包包的美好时光</h1>
<div class="img1">
<ul>
<li class="pic-1">
</li>
<li class="pic-2">
</li>
<li class="pic-3">
</li>
<li class="pic-4">
</li>
</ul>
</div>
</body>
记得改变图片路径哦
我的包裹如下：总文件夹为“自动轮播”，文件夹内含下面三个文件，新建文件夹img ，将图片放入img中。
记得CSS部分要写在head标签内哦
记得HTML部分要写在body标签内哦
