로딩 애니메이션 효과를 구현하기 위해 CSS3를 사용한 코드 사례 공유-CSS 튜토리얼-php.cn

로딩 애니메이션 효과를 구현하기 위해 CSS3를 사용한 코드 사례 공유

黄舟

풀어 주다： 2017-05-25 10:14:46

원래의

2162명이 탐색했습니다.

로딩 애니메이션 효과를 구현하기 위해 CSS3를 사용한 코드 사례 공유

코드는 다음과 같습니다.

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>css3 loading等待加载代码 - 何问起</title>

    <style>
        @keyframes move {
            from {
                transform: translate(0,50%);
            }

            to {
                transform: translate(0,850%);
            }
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 325px;
            height: 100vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            align-content: flex-start;
            background: #2a2a2a;
        }

        figure {
            margin: 30px;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            position: relative;
            background: #1c1c1c;
        }

        section {
            width: 10%;
            height: 100%;
            position: absolute;
            left: 45%;
        }

            section:nth-child(2) {
                transform: rotate(22.5deg);
            }

            section:nth-child(3) {
                transform: rotate(45deg);
            }

            section:nth-child(4) {
                transform: rotate(67.5deg);
            }

            section:nth-child(5) {
                transform: rotate(90deg);
            }

            section:nth-child(6) {
                transform: rotate(112.5deg);
            }

            section:nth-child(7) {
                transform: rotate(135deg);
            }

            section:nth-child(8) {
                transform: rotate(157.5deg);
            }

        figure p {
            height: 10%;
            border-radius: 50%;
            background: dodgerblue;
            animation: move 1s ease-in-out infinite alternate;
        }

        figure:nth-child(1) > section:nth-child(1) > p {
            animation-delay: -0.1875s;
        }

        figure:nth-child(1) > section:nth-child(2) > p {
            animation-delay: -0.175s;
        }

        figure:nth-child(1) > section:nth-child(3) > p {
            animation-delay: -0.1625s;
        }

        figure:nth-child(1) > section:nth-child(4) > p {
            animation-delay: -0.15s;
        }

        figure:nth-child(1) > section:nth-child(5) > p {
            animation-delay: -0.9375s;
        }

        figure:nth-child(1) > section:nth-child(6) > p {
            animation-delay: -0.925s;
        }

        figure:nth-child(1) > section:nth-child(7) > p {
            animation-delay: -0.9125s;
        }

        figure:nth-child(1) > section:nth-child(8) > p {
            animation-delay: -0.9s;
        }

        figure:nth-child(2) > section:nth-child(1) > p {
            animation-delay: -0.875s;
        }

        figure:nth-child(2) > section:nth-child(2) > p {
            animation-delay: -0.75s;
        }

        figure:nth-child(2) > section:nth-child(3) > p {
            animation-delay: -0.625s;
        }

        figure:nth-child(2) > section:nth-child(4) > p {
            animation-delay: -0.5s;
        }

        figure:nth-child(2) > section:nth-child(5) > p {
            animation-delay: -0.375s;
        }

        figure:nth-child(2) > section:nth-child(6) > p {
            animation-delay: -0.25s;
        }

        figure:nth-child(2) > section:nth-child(7) > p {
            animation-delay: -0.125s;
        }

        figure:nth-child(3) > section:nth-child(1) > p {
            animation-delay: -0.5s;
        }

        figure:nth-child(3) > section:nth-child(3) > p {
            animation-delay: -0.5s;
        }

        figure:nth-child(3) > section:nth-child(5) > p {
            animation-delay: -0.5s;
        }

        figure:nth-child(3) > section:nth-child(7) > p {
            animation-delay: -0.5s;
        }

        figure:nth-child(4) > section:nth-child(1) > p {
            animation-delay: -0.35s;
        }

        figure:nth-child(4) > section:nth-child(2) > p {
            animation-delay: -0.3s;
        }

        figure:nth-child(4) > section:nth-child(3) > p {
            animation-delay: -0.25s;
        }

        figure:nth-child(4) > section:nth-child(4) > p {
            animation-delay: -0.2s;
        }

        figure:nth-child(4) > section:nth-child(5) > p {
            animation-delay: -0.15s;
        }

        figure:nth-child(4) > section:nth-child(6) > p {
            animation-delay: -0.1s;
        }

        figure:nth-child(4) > section:nth-child(7) > p {
            animation-delay: -0.05s;
        }
    </style>

    <script src="js/prefixfree.min.js"></script></head><body>

    <figure>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
    </figure>

    <figure>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
    </figure>

    <figure>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
    </figure>

    <figure>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
        <section><p></p></section>
    </figure>

    <p style="text-align:center;margin:50px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">
        <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
        <p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a></p>
    </p></body></html>

로그인 후 복사

위 내용은 로딩 애니메이션 효과를 구현하기 위해 CSS3를 사용한 코드 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!