css3动画编写图片无缝滚动的效果
程序员文章站
2022-03-18 19:45:17
...
css3动画编写图片无缝滚动的效果
代码编写如下
<!doctype html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8" />
<style type="text/css">
/*无缝滚动*/
nav {
padding-top:10px;
margin:0 auto;
width:600px;
height:80px;
border:1px solid pink;
overflow:hidden;
}
nav ul {
list-style: none;
}
nav ul li {
float:left;
}
nav ul {
width:200%;
/*动画名称为moving 动画时长5s 匀速运动 无限循环*/
animation:moving 5s linear infinite;
}
@keyframes moving {
from {
transform: translatex(0);
}
to {
transform: translatex(-600px);
}
}
nav:hover ul { /*鼠标经过nav 里面的ul 就不做动画了*/
animation-play-state:paused;/*鼠标放上去时，暂停动画*/
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="img/car.jpg" style="width:100px" /></li>
<li><img src="img/car2.jpg" style="width:100px" /></li>
<li><img src="img/car3.jpg" style="width:100px" /></li>
<li><img src="img/car4.jpg" style="width:100px" /></li>
<li><img src="img/car5.jpg" style="width:100px" /></li>
<li><img src="img/car6.jpg" style="width:100px" /></li>
<li><img src="img/car.jpg" style="width:100px" /></li>
<li><img src="img/car2.jpg" style="width:100px" /></li>
<li><img src="img/car3.jpg" style="width:100px" /></li>
<li><img src="img/car4.jpg" style="width:100px" /></li>
<li><img src="img/car5.jpg" style="width:100px" /></li>
<li><img src="img/car6.jpg" style="width:100px" /></li>
</ul>
</nav>
</body>
</html>
上一篇： css3实现无缝隙轮播图滚动