<!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删除。