用CSS3实现轮播效果，轮播的触发条件是将鼠标放在轮播区上。```html:run<!DOCTYPE html><html lang="en"><head> <Meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } @keyframes aaa { from {left:0;} to {left:-4000px;} } #aaa{ margin:0 auto; width:800px; height:400px; overflow: hidden; position: relative; } #aaa{ background: 100% no-repeat url(https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png); } #aaa:after{ content: ""; display: block; padding-top: 50%; } #bbb{ position: absolute; width:4000px; height:400px; } #bbb div{ width:800px; height:400px; float:left; } #bbb div img{ width:100%; height:100%; } #bbb:hover{ animation: aaa 15s ease-in 0.5s infinite; } </style></head><body><div id="aaa"> <div id="bbb"> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" /></div> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" /></div> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" /></div> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" /></div> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" /></div> </div></div></body></html>```
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
