第一次在这样的网站写东西。好紧张啊，不知道该怎么写，，所以大家不要喷哦。我一定会努力写好的，嘿嘿
几种纯CSS实现的焦点图轮播，刚接触前端开发，感觉蛮有意思的，再学习的过程中要学会总结，所以我就总结了下面几种用css实现轮播图的效果，分享给大家，希望给和我一样正在学习的人一些帮助，废话就不多说啦。
纯CSS实现轮播
第一种
#wrap {width: 300px;text-align: center;overflow: hidden;margin: 50px 50px;}
.box {width: 1200px;height: auto;display: inline-block;}
.box img {width: 300px;float: left;}
.box {animation: b1 10s infinite;}
@-webkit-keyframes b1 {
0% {margin-left: 0px;}
15% {margin-left: 0px;}
20% {margin-left: -300px;}
30% {margin-left: -300px;}
35% {margin-left: -600px;}
45% {margin-left: -600px;}
50% {margin-left: -900px;}
60% {margin-left: -900px;}
65% {margin-left: -600px;}
75% {margin-left: -600px;}
80% {margin-left: -300px;}
90% {margin-left: -300px;}
100%{margin-left: 0px;}
}
</head>
<body>
<div id="wrap">
<div class="box">
<img src="你的图片地址" id="a1" />
<img src="你的图片地址" id="a2" />
/*这里就看你放的图片有多少。。我就只写了两张的，，，，*/
</div>
</div>
</body>
第二种
<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<meat charset ="utf-8" />
<style>
#wrap{
height:500px;
whide:100%;
background:url("你的背景图片地址1")，URL("你的背景图片2")，......想放几张放几张；格式都是这样子的。就看你的要轮播的图片啦；
background-size：100%；
background-repeat:no-repeat;
}
#wrap{
animation:sb 10s infinite;}
@keyframes sb{
0%{ background: url("./img/1-1.jpg");}
20%{background: url("./img/1-1.jpg");}
25%{background: url("./img/1-3.jpg")}
45%{background: url("./img/1-3.jpg")}
50%{background: url("./img/1-4.jpg")}
70%{background: url("./img/1-4.jpg")}
75%{background: url("./img/1-5.jpg")}
90%{background: url("./img/1-5.jpg")}
100%{background: url("./img/1-1.jpg")}
}
</style>
</head>
</html>
已经写了两种啦，还有一种，等有时间了给大家分享。。。。。
网友评论