爱站程序员基地使用html、css实现了一个轮播图
图片用的是一样大小的图
html
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><link rel=\"stylesheet\" href=\"lunbotu.css\"></head><body><div class=\"box\"><ul><li><img src=\"1.jpg\" alt=\"\"></li><li><img src=\"2.jpg\" alt=\"\"></li><li><img src=\"3.jpg\" alt=\"\"></li><li><img src=\"4.jpg\" alt=\"\"></li><li><img src=\"1.jpg\" alt=\"\"></li></ul></div></body></html>
css
*{padding: 0;margin: 0;}img{width: 598px;height: auto;float: left;border: 2px solid black;}.box{width: 600px;height: auto;overflow: hidden;margin: 0 auto;margin-top: 200px;}.box ul{list-style: none;width: 3020px;animation: marginLeft 5s infinite;}/*鼠标悬停时动画暂停*/.box ul:hover{animation-play-state: paused;}/*动画*/@keyframes marginLeft{0% {/* margin-left: 0; */}15%{transform: translateX(-600px);border-radius: 50px;}25% {/* margin-left: -600px; */transform: translateX(-600px);}35%{transform: translateX(-1200px);}50% {/* margin-left: -1200px; */transform: translateX(-1200px);}60%{transform: translateX(-1800px);}75% {/* margin-left: -1800px; */transform: translateX(-1800px);}85%{transform: translateX(-2400px);}100% {/* margin-left: -2400px; */transform: translateX(-2400px);}}
