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>