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: 0;
            margin: 0;
        }
        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>

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