<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box{
position:absolute;
width:20px;
height:20px;
background:grey;
color:white;
text-align:center;
font-family:Microsoft Yahei;
}
#move1{
bottom:0;
left:240px;
animation:change1 10s ease-out infinite;
}
#move2{
bottom:0;
left:260px;
animation:change2 10s ease-out infinite;
}
#move3{
bottom:0;
left:280px;
animation:change3 10s ease-out infinite;
}
#frame{
position:absolute;
width:300px;
height:200px;
overflow:hidden;
}
#photos img{
float:left;
width:300px;
height:200px;
}
#photos{
position:relative;
width:900px;
animation:actions 10s ease-out infinite;
}
@keyframes actions{
0%,30%{margin-left:0px;}
35%,65%{margin-left:-300px;}
70%,100%{margin-left:-600px;}
}
@keyframes change1{
0%,30%{background:red;}
35%,65%{background:grey;}
70%,100%{background:grey;}
}
@keyframes change2{
0%,30%{background:grey;}
35%,65%{background:red;}
70%,100%{background:grey;}
}
@keyframes change3{
0%,30%{background:grey;}
35%,65%{background:grey;}
70%,100%{background:red;}
}
</style>
</head>
<body>
<div id="frame">
<div id="photos">
<img id="img1" src="images/background1.png">
<img id="img2" src="images/background2.png">
<img id="img3" src="images/background3.png">
</div>
<div class="box" id="move1">1</div>
<div class="box" id="move2">2</div>
<div class="box" id="move3">3</div>
</div>
</body>
</html>浅谈纯CSS实现轮播
本文转载:CSDN博客