CSS3-animation实现走马灯效果

动画animation

1.先定义动画：

@keyframes 动画名称(

from{}

to{}

)

或者

@keyframes 动画名称(

0%{}

50%{}

100%{}

)

百分号指的是动画时长的占比。

2.使用动画

在需要使用动画的元素中添加  

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 完毕时状态。  其中前两个动画名称和动画时长是必须的，其余的属性选填，且没有顺序要求

 

案例：利用animation实现走马灯动画效果如下

代码如下

<div class="box">
        <ul>
            <li><img src="../images/product.jpeg" alt=""></li>
            <li><img src="../images/car.jpg" alt=""></li>
            <li><img src="../images/bg.jpg" alt=""></li>
            <li><img src="../images/1.jpg" alt=""></li>
            <li><img src="../images/fm.jpg" alt=""></li>
            <li><img src="../images/play.png" alt=""></li>

            <!--每次在box中可视范围是（610-2*5）/150=4四张图片，当移动至最后几张时，会导致空白出现，为了保证走马灯的无缝隙，将最初未移动时可视范围内的几张图片添加至末尾以遮住留白 -->
            <li><img src="../images/product.jpeg" alt=""></li>
            <li><img src="../images/car.jpg" alt=""></li>
            <li><img src="../images/bg.jpg" alt=""></li>
            <li><img src="../images/1.jpg" alt=""></li>
        </ul>
    </div>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    ul {
        list-style: none;
    }

    .box {
        margin: 100px auto;
        width: 610px;
        height: 110px;
        border: 5px solid black;

        overflow: hidden;
    }

    .box ul {
        /* 如果不设置ul的宽度会导致li浮动的时候由于父级元素的宽度不够而换行，所以ul需要设置足够的宽度呈放所有的li 10*150=1500 */
        width: 1500px;

        /* 使用动画 */
        /* linear匀速运动 */
        animation: move 4s infinite linear;
    }

    /* 当鼠标移入box中的时候动画停止，移出动画继续 */
    .box:hover ul{
        animation-play-state: paused;
    }

    .box li {
        float: left;
        width: 150px;
        height: 100px;
    }

    .box li img {
        width: 150px;
        height: 100px;
    }

    /* 定义动画 */
    @keyframes move{
        /* from 是从原始位置出发，所以可以省略 */
        to{
            /* 移动至添加最初四个li之前的最后一个li（150*6=900），此时如果未在li末尾进行添加就会导致空白出现 */
            transform: translate(-900px);
        }
    }
</style>