用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>```