首頁  >  文章  >  web前端  >  CSS3實作輪播動畫程式碼

CSS3實作輪播動畫程式碼

零下一度
零下一度原創
2017-04-17 17:52:512317瀏覽

輪播動畫簡單實現

現在的前端,越來越注重使用者互動和體驗,有很多動畫和效果是很常見的,如本篇要講的主題:輪播動畫。這和以前常聽到的一個名詞–」跑馬燈「效果一樣。在CSS3出來之前,都是透過JavaScript實現的動畫,現在我們完全可以使用CSS3,效能有很大的提升,相容性也已經很不錯,尤其是行動裝置。

CSS3實現動畫效能會有極大提升,特別是當頁面動畫較多或定時器較多時。

html結構:

    <h2>CSS实现</h2>
    <p class="wrapper-css">
        <p class="container-css marquee">
            <p>今天</p>
            <p>明天</p>
            <p>后天</p>
            <p>今天</p><!-- 辅助元素,为实现循环轮播 -->
        </p>
    </p>

 

可以看到,依然需要在後面加入一個重複輔助元素,實現循環輪播效果。

CSS程式碼:

    // 轮播动画
        @-webkit-keyframes marquee {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            27% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            33% {
                -webkit-transform: translate3d(0, -100%, 0);
            }
            60% {
                -webkit-transform: translate3d(0, -100%, 0);
            }
            67% {
                -webkit-transform: translate3d(0, -200%, 0);
            }
            94% {
                -webkit-transform: translate3d(0, -200%, 0);
            }
            100% {
                -webkit-transform: translate3d(0, -300%, 0);
            }
        }
        @keyframes marquee {
            0% {
                transform: translate3d(0, 0, 0);
            }
            /* 100/3 * (2s/2.5s) => 26.7% => 27% */
            27% {
                transform: translate3d(0, 0, 0);
            }
            /* 100/3 =>33.3 => 33% */
            33% {
                transform: translate3d(0, -100%, 0);
            }
            60% {
                transform: translate3d(0, -100%, 0);
            }
            67% {
                transform: translate3d(0, -200%, 0);
            }
            94% {
               transform: translate3d(0, -200%, 0);
            }
            100% {
                transform: translate3d(0, -300%, 0);
            }
        }
        .wrapper-css {
            width: 200px;
            height: 30px;
            margin: 10px;
            overflow: hidden;
        }

        .container-css {
            height: 30px;
            -webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */
            animation: marquee 7.5s linear infinite;
        }
        .container-css p {
            width: 100%;
            height: 30px;
            margin: 0;
            line-height: 30px;
            font-size: 18px;
        }

 

如上,我們使用CSS3定義動畫關鍵幀,並結合transform位移實現無縫輪播動畫,透過移動容器實現輪播效果,主要需要根據輪播元素計算動畫關鍵幀點

以上是CSS3實作輪播動畫程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn