HTML代码部分：
1 <div id="wrap">
2 <ul id="list">
3 <li>10</li>
4 <li>9</li>
5 <li>8</li>
6 <li>7</li>
7 <li>6</li>
8
9 <li>5</li>
10 <li>4</li>
11 <li>3</li>
12 <li>2</li>
13 <li>1</li>
14 </ul>
15 </div>
CSS3代码部分：
1 <style type="text/css">
2 @-webkit-keyframes move{
3 0%{left:-500px;}
4 100%{left:0;}
5 }
6 #wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
7 overflow: hidden;}
8
9 #list{position:absolute;left:0;top:0;padding:0;margin:0;
10 -webkit-animation:5s move infinite linear;width:200%;}
11
12 #list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
13 color:#fff;text-align: center;float:left;font:normal 50px/2.5em \'微软雅黑\';}
14
15 #wrap:hover #list{-webkit-animation-play-state:paused;}
16 </style>
最终效果图如下：
