使用CSS3来实现Loading动画特效的代码案例分享-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

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

黄舟

May 25, 2017 am 10:14 AM

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

代码如下：

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

Salin selepas log masuk

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

Kenyataan Laman Web ini

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

3 minggu yang lalu By DDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

3 minggu yang lalu By DDD

Nordhold: Sistem Fusion, dijelaskan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1666

Tutorial CakePHP

1425

Tutorial Laravel

1328

Tutorial PHP

1273

Tutorial C#

1253

Tunjukkan Lagi

Related knowledge

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Jun 01, 2022 pm 07:15 PM

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Apr 25, 2022 pm 04:52 PM

Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".

Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3 Apr 28, 2022 pm 04:32 PM

Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".

Bagaimana untuk melaksanakan kesan pemuatan global dalam Vue Jun 11, 2023 am 09:05 AM

Dalam pembangunan bahagian hadapan, kita sering mempunyai senario di mana pengguna perlu menunggu data dimuatkan semasa interaksi dengan halaman web Pada masa ini, biasanya terdapat kesan pemuatan yang dipaparkan untuk mengingatkan pengguna untuk menunggu. Dalam rangka kerja Vue, tidak sukar untuk melaksanakan kesan pemuatan global Mari perkenalkan cara melaksanakannya. Langkah 1: Cipta pemalam Vue Kita boleh mencipta pemalam Vue bernama loading, yang boleh dirujuk dalam semua kejadian Vue. Dalam pemalam, kita perlu melaksanakan dua kaedah berikut: s

See all articles