第1个回答 2021-01-25
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css实现轮播效果</title> <style type="text/css"> .one { position: absolute; width: 500px; height: 400px; overflow: hidden; } .one_cantent img { width: 500px; height: 300px; float: left; } .one_cantent { width: 2500px; height: 400px; position: absolute; left: 0px; animation-name: move; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes move { 0% { left: 0px; } 25% { left: -500px; } 50% { left: -1000px; } 75% { left: -1500px; } 100% { left: -2000px } } </style> </head> <body> <div> <div> <img src="./image/0.jpg"> <img src="./image/1.jpg"> <img src="./image/2.jpg"> <img src="./image/3.jpg"> <img src="./image/4.jpg"> </div> </div> </body> </html>