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

零下一度
풀어 주다: 2017-04-17 17:52:51
원래의
2330명이 탐색했습니다.

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

요즘 프론트엔드는 사용자 상호작용과 경험에 점점 더 많은 관심을 기울이고 있습니다. 이 기사의 주제와 같이 매우 일반적인 애니메이션과 효과가 많이 있습니다. 회전목마 애니메이션. 이는 이전에 자주 들었던 용어인 "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿