css3 loading等待加載代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 網頁特效代碼 >> css3 loading等待加載代碼

css3 loading等待加載代碼

編輯：網頁特效代碼

查看效果：
http://hovertree.com/texiao/css3/43/

代碼如下：


<!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 div {
            height: 10%;
            border-radius: 50%;
            background: dodgerblue;
            animation: move 1s ease-in-out infinite alternate;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</head>

<body>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

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

網頁特效代碼

HTML5烏龜推箱子游戲: 效果：http://hovertree.com/texiao/html5/34/代碼如下：<!
jquery導航置頂: 效果體驗:http://hovertree.com/texiao/jquery/6.htmHTML文
jQuery+CSS3實現可拖拽的3D立體圖片展示環: 這是一個使用了CSS3立體效果的強大特效，本特效使用jQuery跟CSS3 transform來實現

前端技巧關於網頁技巧 WEB前端代碼網頁特效代碼

小編推薦

HovertreeTags標簽雲JS特效 jquery ui打開url網址的對話框使用Canvas實現普羅大眾表情包 JS右下角懸浮可最小化和關閉的廣告純CSS3光標懸停圖片上升顯示描述 jquery每日打卡簽到純CSS3圓形主菜單展開特效使用HTML5 Canvas實現圖片馬賽克模糊 css3實現飛機在雲層間飛行特效 Javascript模擬拆紅包效果

DIV CSS 佈局教程網

相關文章