纯CSS实现焦点图''轮播''
2016-09-04 本文已影响1772人
我就是大表哥
第一次在这样的网站写东西。好紧张啊，不知道该怎么写，，所以大家不 要喷哦。我一定会努力写好的，嘿嘿。
几种纯CSS实现的焦点图轮播，刚接触前端开发，感觉蛮有意思的，再学习的过程中要学会总结，所以我就总结了下面几种用css实现轮播图的效果，分享给大家，希望给和我一样正在学习的人一些帮助，废话就不多说啦。
CSS实现轮播
第一种
<html>
<head>
<title></title>
</head>
<style type="text/css">
#wrap {
width: 300px;
text-align: center;
overflow: hidden;
margin: 50px 50px;
}
.box {
width: 1200px;
height: auto;
display: inline-block;
animation: b1 10s infinite;
}
.box img {
width: 300px;
float: left;
}
@-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;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="box">
<img src="你的图片地址" id="a1" />
<img src="你的图片地址" id="a2" /> /*这里就看你放的图片有多少。。我就只写了两张的，，，，*/
</div>
</div>
</body>
</html>
第二种
<!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>
<body>
<div id="wrap"></div>
</body>
</html>
- 已经写了两种啦，还有一种，等有时间了给大家分享。。。。。
