h5-动画小案例-滚动展示

1.html区域

 <div>
     <ul>
         <li><img src="../img/a.jpg" alt=""></li>
         <li><img src="../img/b.jpg" alt=""></li>
         <li><img src="../img/c.jpg" alt=""></li>
         <li><img src="../img/d1.jpg" alt=""></li>
         <li><img src="../img/e.jpg" alt=""></li>
         <li><img src="../img/f.jpg" alt=""></li>
         <li><img src="../img/g.jpg" alt=""></li>
         <li><img src="../img/h.jpg" alt=""></li>
         <li><img src="../img/a.jpg" alt=""></li>
         <li><img src="../img/b.jpg" alt=""></li>
         <li><img src="../img/c.jpg" alt=""></li>
         <li><img src="../img/d1.jpg" alt=""></li>
         <li><img src="../img/e.jpg" alt=""></li>
         <li><img src="../img/f.jpg" alt=""></li>
         <li><img src="../img/g.jpg" alt=""></li>
         <li><img src="../img/h.jpg" alt=""></li>
     </ul>
 </div>

2.css代码区域

     <style>
         *{
             padding:;
             margin:;
         }
         img{
             width: auto;
             height: 155px;
         }
         div{
             width: 1480px;
             height: 155px;
             margin: 100px auto;
             background-color: #ddd;
             overflow: hidden;
         }
         div > ul{
             width: 200%;
             list-style: none;

             /*添加动画*/
             /*名字*/
             animation-name: move;
             /*耗时*/
             animation-duration: 7s;
             /*无限循环*/
             animation-iteration-count: infinite;
             /*时间函数*/
             animation-timing-function: linear;
         }

         div > ul > li{
             width: auto;
             float: left;
         }

         div > ul >li > img{
             height: 100%;
         }

         /*鼠标上移，停止动画*/
         div:hover > ul{
             /*修改鼠标样式*/
             cursor: pointer;
             /*暂停动画*/
             animation-play-state: paused;
         }

         /*创建动画*/
         @keyframes move {
             from{
                 transform: translateX(0);
             }
             to{
                 transform: translateX(-1480px);
             }
         }

     </style>

效果图：一只滚动，鼠标悬浮及停止滚动