CSS3는 캐러셀 애니메이션 코드를 구현합니다.

캐러셀 애니메이션의 손쉬운 구현

요즘 프론트엔드는 사용자 상호작용과 경험에 점점 더 많은 관심을 기울이고 있습니다. 이 기사의 주제와 같이 매우 일반적인 애니메이션과 효과가 많이 있습니다. 회전목마 애니메이션. 이는 이전에 자주 들었던 용어인 "marquee"와 동일한 효과를 갖습니다. 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를 사용하여 애니메이션 키프레임을 정의하고 변환 변위와 결합하여 원활한 캐러셀 애니메이션을 구현하고 캐러셀 효과를 구현합니다. 컨테이너 이동, 주로 캐러셀 요소를 기반으로 애니메이션 키 프레임 포인트를 계산해야 합니다

위 내용은 CSS3는 캐러셀 애니메이션 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!