您的位置：首页 > Web前端 > HTML5

HTML5 animation 无缝轮播

2016-07-31 17:30 267 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<style>
.div1{
width: 770px;
height: 300px;
overflow: hidden;
margin: auto;
position: relative;
}

@keyframes anis {
100%{transform: translate(-4620px)}
}
img{
position: absolute;
}
.div2{
animation: anis 20s linear infinite;
}
.div2:hover{
animation-play-state:paused;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<img style="left: 0;" src="../../img/ad7.jpg" alt="">
<img style="left: 770px;" src="../../img/ad1.jpg" alt="">
<img style="left: 1540px;" src="../../img/ad2.jpg" alt="">
<img style="left: 2310px;" src="../../img/ad3.jpg" alt="">
<img style="left: 3080px;" src="../../img/ad4.jpg" alt="">
<img style="left: 3850px;" src="../../img/ad5.jpg" alt="">
<img style="left: 4620px;" src="../../img/ad6.jpg" alt="">
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航