浅谈纯CSS实现轮播

来源：互联网发布：js特效模板编辑：程序博客网时间：2024/05/20 22:35
<!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>
1 0