CSS3 implémente le code d'animation du carrousel

Mise en œuvre facile de l'animation de carrousel

De nos jours, le front-end accorde de plus en plus d'attention à l'interaction et à l'expérience de l'utilisateur. Il existe de nombreuses animations et effets très courants, comme le sujet de cet article : animation carrousel. Cela a le même effet qu'un terme souvent entendu auparavant : « chapiteau ». Avant la sortie de CSS3, les animations étaient toutes implémentées via JavaScript. Désormais, nous pouvons utiliser complètement CSS3, les performances ont été grandement améliorées et la compatibilité est également très bonne, notamment du côté mobile.

Les performances des animations CSS3 seront grandement améliorées, surtout lorsque la page comporte de nombreuses animations ou minuteries.

Structure HTML :

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

Comme vous pouvez le voir, vous devez toujours ajouter un élément auxiliaire répétitif à la fin pour obtenir l'effet de boucle.

Code 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;
        }

Comme ci-dessus, nous utilisons CSS3 pour définir des images clés d'animation et les combinons avec le déplacement de transformation pour obtenir une animation de carrousel transparente et réaliser le carrousel en déplaçant le conteneur Pour jouer l'effet, il faut principalement calculer les points d'image clés de l'animation en fonction des éléments du carrousel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!