用html+css实现轮播图

html部分：

<div class="slide"> <ul class="lunbo"> <li>1</li> <li>2</li> <li>3</li> </ul> </div>

css部分

.slide{ position: relative; margin: auto; width: 400px; height: 400px; text-align: center; overflow: hidden; } ul{ margin: 10px 0; padding: 0; width: 10000px; transition: all 0.5s; } .slide .lunbo{ animation: marginleft 10.5s infinite; } .slide li{ float: left; width: 400px; height: 400px; list-style: none; line-height: 200px; } .slide li:nth-child(1){ background-color: black; } .slide li:nth-child(2){ background-color: burlywood; } .slide li:nth-child(3){ background-color: coral; } @keyframes marginleft { 0%{ margin-left: 0; } 33%{ margin-left: -400px; } 66%{ margin-left: -800px; } 95%{ margin-left: -1200px; } 100%{ margin-left: 0; } }

但是基本可以实现，效果还有点瑕疵

?

?

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。