<!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%{b
浅谈纯CSS实现轮播
最新推荐文章于 2023-12-18 21:02:39 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)