<!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:-1000px;}
}
#aaa{
margin:100px auto;
width:200px;
height:200px;
background: red;
overflow: hidden;
position: relative;
}
#bbb{
position: absolute;
width:1000px;
height:200px;
}
#bbb div{
width:200px;
height:200px;
float:left;
}
#bbb:hover{
animation: aaa 5s ease-in 0s infinite;
}
</style>
</head>
<body>
<div id="aaa">
<div id="bbb">
<div style="background: green"></div>
<div style="background: blue"></div>
<div style="background: black"></div>
<div style="background: yellow"></div>
<div style="background: grey"></div>
</div>
</div>
</body>
</html>
用CSS3實現輪播效果
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。