2. 程式人生 > >純CSS預載入動畫效果

純CSS預載入動畫效果

阿新 • • 發佈：2019-01-11

效果圖

這裡寫圖片描述


<style>
    #loading {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background: #121220;
        overflow:hidden;
        z-index:9999;
    }
    /*載入圈*/
    .spinner {
        margin:0 auto;
        width:60px;
        height:60px;
        position
 
:relative;
        top:40%;
    }
    .container1 > div,.container2 > div,.container3 > div {
        width:15px;
        height:15px;
        background-color:#fff;
        border-radius:100%;
        position:absolute;
        -webkit-animation:bouncedelay 1.2s infinite ease-in-out;
        animation
 
:bouncedelay 1.2s infinite ease-in-out;
        -webkit-animation-fill-mode:both;
        animation-fill-mode:both;
    }
    .spinner .spinner-container {
        position:absolute;
        width:100%;
        height:100%;
    }
    .container2 {
        -webkit-transform:rotateZ(45deg);
        transform
 
:rotateZ(45deg);
    }
    .container3 {
        -webkit-transform:rotateZ(90deg);
        transform:rotateZ(90deg);
    }
    .circle1 {
        top:0;
        left:0;
    }
    .circle2 {
        top:0;
        right:0;
    }
    .circle3 {
        right:0;
        bottom:0;
    }
    .circle4 {
        left:0;
        bottom:0;
    }
    .container2 .circle1 {
        -webkit-animation-delay:-1.1s;
        animation-delay:-1.1s;
    }
    .container3 .circle1 {
        -webkit-animation-delay:-1.0s;
        animation-delay:-1.0s;
    }
    .container1 .circle2 {
        -webkit-animation-delay:-0.9s;
        animation-delay:-0.9s;
    }
    .container2 .circle2 {
        -webkit-animation-delay:-0.8s;
        animation-delay:-0.8s;
    }
    .container3 .circle2 {
        -webkit-animation-delay:-0.7s;
        animation-delay:-0.7s;
    }
    .container1 .circle3 {
        -webkit-animation-delay:-0.6s;
        animation-delay:-0.6s;
    }
    .container2 .circle3 {
        -webkit-animation-delay:-0.5s;
        animation-delay:-0.5s;
    }
    .container3 .circle3 {
        -webkit-animation-delay:-0.4s;
        animation-delay:-0.4s;
    }
    .container1 .circle4 {
        -webkit-animation-delay:-0.3s;
        animation-delay:-0.3s;
    }
    .container2 .circle4 {
        -webkit-animation-delay:-0.2s;
        animation-delay:-0.2s;
    }
    .container3 .circle4 {
        -webkit-animation-delay:-0.1s;
        animation-delay:-0.1s;
    }
    @-webkit-keyframes bouncedelay {
        0%,80%,100% {
            -webkit-transform:scale(0.0)
        }
        40% {
            -webkit-transform:scale(1.0)
        }
    }
    @keyframes bouncedelay {
        0%,80%,100% {
            transform:scale(0.0);
            -webkit-transform:scale(0.0);
    }
        40% {
            transform:scale(1.0);
            -webkit-transform:scale(1.0);
        }
    }
</style>
<body>
    <div id="loading" >
        <div class="spinner">
          <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
          </div>
          <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
          </div>
          <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
          </div>
        </div>
    </div>
</body>

相關推薦

純CSS預載入動畫效果

效果圖 <style> #loading { position:absolute; left:0; top:0; width:100%; heig

用純CSS實現載入中動畫效果

HTML &lt;div class="pswp__preloader__icn"&gt; &lt;div class="pswp__preloader__cut"&gt; &lt;div class="pswp__preloader__donut"&

CSS動畫例項：Loading載入動畫效果（一）

      一些網站或者APP在載入新東西的時候，往往會給出一個好看有趣的Loading圖，大部分的Loading樣式都可以使用CSS3製作出來，它不僅比直接使用gif圖簡單方便，還能節省載入時間和空間。下面介紹常見的一些Loading動畫效果圖的製作方法。 1．圓環型Loadi

純CSS程式碼實現手風琴效果

這裡我們使用最簡單和最少的程式碼實現。 1、準備圖片 相同尺寸六張 2、詳細程式碼如下 手風琴效果的原理是：當滑鼠移入的時候，改變ul下li的寬度，方案簡單可行。 <!DOCTYPE html> <html lang="en"> <hea

6種預載動畫效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5種預載動畫效果</title> <style> /*

網頁頁面預載入動畫的實現，載入後隱藏

我們做web app的時候，可以做一個頁面載入廣告，在你網頁載入的時候，先出現一段gif動圖或者是海報。 下面是實現頁面載入動畫的程式碼 首先js程式碼的實現 (function($){ $(window).load(function(){ $('#b

css彈窗動畫效果

/*彈層動畫（從上往下）*/ .fadeIn { -webkit-animation: fadeInDown .3s; animation: fadeInDown .3s; } @keyframes fadeInDown { 0% { -webkit-tran

純css實現緩衝動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

簡單css實現3d動畫效果

知識儲備 transition: transform 10s; 過度的變形時間為10s transform-style: preserve-3d; 變形的樣式是3d變化 relative和absolute：相對定位和絕對定位 relative相對於原來文

android仿支付寶螞蟻森林載入動畫效果

一圖勝千言 偷過別人能量的小夥伴都熟悉這個載入效果，下面就講解一下實現過程。 1，自定義view 2，這裡要用到螞蟻森林的圖示，如圖 通過canvas.drawBitmap()畫出圖片。 3，通過PorterDuff.Mode.SRC_IN，給圖片填充想要的

【第1159期】CSS預載入Preload

前言看天氣預報，今天好多地方都開始下雪了。今日早讀文章由@李斌分享。正文從這開始～Preload

linear-gradient實現純CSS文字淡入效果

利用CSS中的linear-gradient屬性和幀動畫，實現文字的淡入效果。 css程式碼 linear-gradient屬性 @-webkit-keyframes shinetext {

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

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

不可思議的純 CSS 滾動進度條效果

結論先行，如何使用 CSS 實現下述滾動條效果？ 就是頂部黃色的滾動進度條，隨著頁面的滾動進度而變化長短。 在繼續閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，能否巧妙的實現上述效果。 OK，繼續。這個效果是我在業務開發的過程中遇到的一個類似的小

純css實現圖片翻轉效果

所要掌握知識點 CSS樣式 1.backface-visibility; visible/hidden: 設定當所指定的元素被進行翻轉等操作而使背面顯示時，是否進行顯示還是隱藏 2.transf

仿美團載入動畫效果

這兩天在用美團的時候，平時中沒有注意的一個小細節，今天注意到了，就是在進入新頁面還沒有載入資料的時候，我們都可以看到一個小人像是在跑步，於是我非常好奇這個東西是怎麼做的呢？於是乎我就把它的apk下載下來，然後解壓之後，看到了 drawable-xxhdpi-v4

android 使用Path實現搜尋動態載入動畫效果

今天實現一個搜尋動態載入資料的動畫效果,還是先看效果吧,用文字描述乾巴巴的,看圖說話什麼都明白了, 實現這個就是使用Path中的getSegment()不斷的去改變它擷取片段的start和stop,再結合動畫,今天就分步驟實現它,看完以後你也會覺的不是很難,只是沒想到這麼

例項詳解css3動畫庫animate.css的各種動畫效果

animate.css 是一個來自國外的 CSS3 動畫庫，它預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所

純CSS實現選項卡效果

利用 :focus-within 可以在父節點獲取元素獲得焦點的特性，實現的TAB導航切換 .xxk { width: 300px;margin: 50px auto;padding: 10px;border: 1px solid #ddd;} .nav-box {f

純css實現瀑布流效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純CSS3實現的瀑布流</title> <link