第一次在這樣的網(wǎng)站寫東西。好緊張啊，不知道該怎么寫，，所以大家不 要噴哦。我一定會努力寫好的，嘿嘿。
幾種純CSS實現(xiàn)的焦點圖輪播，剛接觸前端開發(fā)，感覺蠻有意思的，再學(xué)習(xí)的過程中要學(xué)會總結(jié)，所以我就總結(jié)了下面幾種用css實現(xiàn)輪播圖的效果，分享給大家，希望給和我一樣正在學(xué)習(xí)的人一些幫助，廢話就不多說啦。
CSS實現(xiàn)輪播
第一種
<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>
- 已經(jīng)寫了兩種啦，還有一種，等有時間了給大家分享。。。。。
