CSS3 implementiert Karussell-Animationscode

Einfache Implementierung von Karussellanimationen

Heutzutage legt das Frontend immer mehr Wert auf Benutzerinteraktion und -erfahrung. Es gibt viele Animationen und Effekte, die sehr verbreitet sind, wie zum Beispiel das Thema dieses Artikels: Karussell-Animation. Dies hat die gleiche Wirkung wie ein früher häufig verwendeter Begriff – „Festzelt“. Vor der Veröffentlichung von CSS3 wurden alle Animationen über JavaScript implementiert. Jetzt können wir CSS3 vollständig verwenden, die Leistung wurde erheblich verbessert und die Kompatibilität ist auch sehr gut, insbesondere auf dem mobilen Endgerät.

Die Leistung von CSS3-Animationen wird erheblich verbessert, insbesondere wenn die Seite viele Animationen oder Timer enthält.

HTML-Struktur:

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

Wie Sie sehen, müssen Sie am Ende noch ein sich wiederholendes Hilfselement hinzufügen, um den Schleifeneffekt zu erzielen.

CSS-Code:

    // 轮播动画
        @-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;
        }

Wie oben verwenden wir CSS3, um Animations-Keyframes zu definieren, und kombinieren es mit Transformationsverschiebung, um eine nahtlose Karussellanimation zu erreichen und zu realisieren Karussell durch Bewegen des Containers Um den Effekt abzuspielen, müssen hauptsächlich die Schlüsselbildpunkte der Animation basierend auf den Karussellelementen berechnet werden

Das obige ist der detaillierte Inhalt vonCSS3 implementiert Karussell-Animationscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!