Rumah > Artikel > hujung hadapan web > 使用CSS3来实现Loading动画特效的代码案例分享

使用CSS3来实现Loading动画特效的代码案例分享

黄舟asal: 2017-05-25 10:14:462169semak imbas

代码如下：

<!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>

Atas ialah kandungan terperinci 使用CSS3来实现Loading动画特效的代码案例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：CSS3中使用word-wrap将英文单词强制换行的示例代码分享Artikel seterusnya：使用css3实现圆形从中心向四周扩散的动画效果的代码分享

Artikel berkaitan

Lihat lagi