原码打包下载《微信回复：无缝滚动》
（页底留言开放，发表感想吧）
● ● ●
丨第一步：
先创建个HTML结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="gungdong.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="pic_list">
<ul>
<li><a href="##"><img src="此处加入你的图片链接.jpg"> </a></li>
<li><a href="##"><img src="此处加入你的图片链接.jpg"></ a></li>
</ul>
</div>
</body>
</html>
丨第二步：
修饰的CSS样式：
@charset "utf-8";
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.pic_list{
width:660px;
height:140px;
margin:100px auto 0;
border:1px solid #666;
border-radius:5px;
box-shadow:0 0 10px #999;
overflow:hidden;
position:relative;
width:1332px;
position:absolute;
animation:gundong 10s linear infinite;
}
ul:hover{
animation-play-state:paused;
}
ul li{
float:left;
width:220px;
height:138px;
border:1px solid #fff;
transition:all 0.5s;
}
ul li:hover{
border:1px solid red;
}
@keyframes gundong{
0%{ left:0; }
100%{ left:-660px; }
}/* CSS Document */
丨第三步：
使用@keyframes定义个动画，让它滚动起来
至此这个完整的dom算是做完了，其实我们用到的新的属性是：animation-play-state:paused 规定动画正在运行还是暂停
是不是很酷！有什么问题可以留言哦！
干货！免费领取腾讯高级讲师网页设计教程
点我领取
点击下方“阅读原文”结交更多有才华的设计师！
↓↓↓