CSS3實現Loading動畫特效

阿新 • • 發佈：2017-05-23

搜狗 tran color orm for ima utf pad body

查看效果：
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>

web前端特效：http://www.cnblogs.com/jihua/p/webfront.html

CSS3實現Loading動畫特效

搜狗 tran color orm for ima utf pad body 查看效果：http://hovertree.com/texiao/css3/43/代碼如下： <!DOCTYPE html> <html> <head>

CSS3 實現loading動畫效果

https://www.jianshu.com/p/55372466ce70 前幾篇介紹了CSS3的3個動畫屬性transform，transition，animation。但即使基本語法能看懂，也不代表能設計出棒棒的動畫效果。在設計這條路上，是學無止境，甚至需要拼天賦的。我也

loading動畫的效能優化-摒棄Canvas，擁抱CSS3-實現點選特效

click-colorful 專案中有個活動頁載入時有個loading動畫，效果如上圖，連續綻放小球，問題就是太卡，經常出現一堆小球抱團卡住，遂進行優化注意：（僅在頁面載入時卡頓，載入完畢，點選的時候不卡頓）檢視程式碼發現改動畫時借用的animejs 官網中的效果，通過can

30種CSS3炫酷頁面預載入loading動畫特效

這是一組效果非常炫酷的CSS3頁面預載入loading動畫特效。該特效共有30種不同的loading效果。所有的載入動畫都是使用CSS3來完成，jQurey程式碼只是用於隱藏載入動畫。當你點選頁面的任何一個地方時，lo

使用 css 的 keyframe 實現 loading 動畫

實現 eas light AC reload info col title direct <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

CSS3帶過渡動畫特效的垂直導航菜單怎麽寫？

html css js 菜單欄清明節已過，開始努力工作學習！!DOCTYPE html> CSS3帶動畫特效的垂直導航菜單

css3滑鼠懸停動畫特效

<div class="block"> <img src="img/1.jpg" alt=""/> <div class="ceng"> <div>HEADING</br>HERE&l

純CSS3實現圖片展示特效

Web瀏覽器端的特效越來越讓人興奮，通過CSS和JavaScript，各種意想不到的絢麗效果都能用簡單的幾句程式碼完成。本文中要實現的一個純CSS3的圖片展示特效，以前只能用JavaScript實現，可想而知會受到多方面的限制，特別是效能。而今天我們將用簡單的CSS3程式碼實現，你會發現它的動畫效果在現代

html5+css3實現2D動畫效果演示

<span style="font-size:18px;">@charset "utf-8"; *{margin:0px;padding:0px;} figure{position:relative;width:33.33%;height:350px;overflow:hidden;float:l

iOS Swift 簡單實現Loading動畫

最近突然對動畫特別感興趣，尤其是最常見的載入動畫，百度了一圈發現全是OC程式碼，這讓我這個習慣寫swift的假iOS開發很是鬱悶。在網上扒的過程中看到一個挺簡單的一個載入動畫，看了一下原作者的程式碼，學習了一下原作者的思想，也感謝那位坐著哈。。。接下來看

利用CSS3實現圖片切換特效

利用label標籤和:checked，並使用到了transform和transition屬性。實現簡單，相比JS而言，非常方便，且效果更佳，有興趣可以拷貝程式碼，修改圖片路徑，執行看看效果。 <

jQuery + CSS3 實現花瓣剝落特效

實現原理：其實花瓣剝落實現與之前寫的一篇jQuery實現流星雨特效的實現原理差不多。在指令碼中動態建立用來放“花瓣”的節點，然後，設定花瓣隨機從瀏覽器上邊緣隨機位置

使用CSS3實現流星雨動畫教程

很多營銷頁面中需要實現類似流星雨的動畫背景，營造節日浪漫的氣氛。要實現這樣的效果，有兩種方法，一個是使用Canvas，一個是使用純CSS3，我們這裡介紹第2種方法，在粒子數量少的時候，實現起來要更為簡單，且便於除錯。先預覽下整體效果：流星雨的構成流星雨=流星+雨。流星本身包含

HTML5 Loading動畫特效集錦

以前我們大部分的Loading動畫都是利用gif圖片實現的，這種圖片實現Loading動畫的方法雖然也很不錯，但是作為HTML5開發者來說，如果能利用HTML5和CSS3實現這些超酷的Loading動畫，那將是一件非常痛快的事情。1、HTML5 Canvas發光

利用css3的animation實現點點點loading動畫效果（二）

設置 str ack rdp 提交 ssi frame spin color box-shadow實現的打點效果簡介 box-shadow理論上可以生成任意的圖形效果，當然也就可以實現點點點的loading效果了。實現原理 html代碼，首先需要寫如下html代

使用 CSS3 實現超炫的 Loading（載入）動畫效果

.spinner { margin: 100px auto; width: 20px; height: 20px; position: relative; } .container1 > div, .container2 > div, .container3 &

html+css3實現簡單載入動畫，loading實現

animation：用於使用動畫animation屬性描述原始碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

CSS3 animation實現點點點loading動畫

一、再續前緣去年夏天，寫了篇名為“CSS3 animation漸進實現點點點等待提示效果”的文章，主要內容是實現類似下面打點等待提示效果，比干巴巴的字元...要更人性化：之前實現的原理是通過寬度和margin控制實現，但是，問題非常明顯，字元寬度受制於字型，例如移

css3實現三種不同的loading載入動畫效果

HTML： <div class="box"> <div class="loader"> <div class="loading-1">

使用 CSS3 實現超炫的 Loading（載入）動畫效果以及cs3的線上製作工具

loading： http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html http://www.cnblogs.com/lhb25/archive/2011/11/22/best-aw

CSS3實現Loading動畫特效

相關推薦