2. 程式人生 > >CSS動畫實戰：建立一個太極Loading圖

CSS動畫實戰：建立一個太極Loading圖

阿新 • • 發佈：2018-12-30

這裡主要是使用CSS的animation和偽類來構建，分析設定關鍵幀的執行順序和時間段。

效果

動畫分析

首先通過效果對動畫執行進行一下分析：

  1. 邊框的四條邊進行按順序動畫載入 。
  2. 矩形邊框變為圓行邊框。
  3. 太極圖內部圖案漸漸出現。
  4. 太極圖旋轉。
  5. 整個動畫逆序執行。

針對上面的1效果是需要思考一下的，其他都比較容易實現。5效果只需設定屬性animation-direction: alternate即可，整體動畫加入animation-iteration-count: infinite來保證無限迴圈。

靜態效果實現

首先將靜態效果做出來。

html結構：

<div id="loader">
  <div class="logo">
    <div class="left"></div>
    <div class="right"></div>
  </div> 
  <p>Loading...</p>
</div>

CSS（LESS）部分：

@border-width:2px;
@loader-width:150px;
@loader-insider-width:@loader-width * 0.15
 
;
@animate-time:4s;

*{
  margin: 0;
  padding: 0;
  border: 0;
}

html, body{
  width: 100%;
  height: 100%;
}

#loader{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    padding: 1.5em;
    font-family
 
: Arial;
  }

  .logo{
    width: @loader-width;
    height: @loader-width;
    position: relative;

    &:before{
      position: absolute;
      content: '';
      left: 0;
      top: 0;
      border-color: transparent;
      border-width: @border-width;
      border-style: solid;
      border-top-color: #000;
      border-right-color: #000;
      width: 100%;
      height: 100%;
    }

    &:after{
      position: absolute;
      content: '';
      bottom: -2 * @border-width;
      right: -2 * @border-width;
      border-color: transparent;
      border-width: @border-width;
      border-style: solid;
      border-bottom-color: #000;
      border-left-color: #000;
      width: 100%;
      height: 100%;
    }

    .left{
      position: absolute;
      width: 50%;
      height: 100%;
      top: @border-width;
      right: 50%;
      background-color: #000;
      border-top-left-radius: 100% 50%;
      border-bottom-left-radius: 100% 50%;

      &:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 50%;
        bottom: 0;
        left: 50%;
        border-radius: 50%;
        background-color: #000;
      }

      &:after{
        position: absolute;
        content: '';
        width: @loader-insider-width;
        height: @loader-insider-width;
        background-color: #fff;
        bottom: ~'calc(25% - @{loader-insider-width} / 2)';
        left: ~'calc(100% - @{loader-insider-width} / 2)';
        border-radius: 50%;
      }      
    }

    .right{
      position: absolute;
      width: 50%;
      height: 100%;
      top: @border-width;
      left: 50%;
      border-top-right-radius: 100% 50%;
      border-bottom-right-radius: 100% 50%;

      &:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 50%;
        top: 0;
        right: 50%;
        border-radius: 50%;
        background-color: #fff;
      }

      &:after{
        position: absolute;
        content: '';
        width: @loader-insider-width;
        height: @loader-insider-width;
        background-color: #000;
        top: ~'calc(25% - @{loader-insider-width} / 2)';
        right: ~'calc(100% - @{loader-insider-width} / 2)';
        border-radius: 50%;
      }    
    }  
  }  
}

效果：

動畫實現

上面已經把靜態的效果實現了，現在將動畫部分抽離出來。

動畫關鍵幀時間段

根據效果，做如下時間段劃分：

邊框效果實現

將.logo的兩個偽類的寬高設定為0，然後新增動畫效果：

.logo{
    width: @loader-width;
    height: @loader-width;
    position: relative;
    animation: spin @animate-time infinite;
    animation-direction: alternate;
    animation-timing-function:ease;

    &:before{
      position: absolute;
      content: '';
      left: 0;
      top: 0;
      border-color: transparent;
      border-width: @border-width;
      border-style: solid;
      animation: line-before @animate-time infinite;
      animation-direction: alternate;
    }

    &:after{
      position: absolute;
      content: '';
      bottom: -2 * @border-width;
      right: -2 * @border-width;
      border-color: transparent;
      border-width: @border-width;
      border-style: solid;
      animation: line-after @animate-time infinite;
      animation-direction: alternate;
    }
}

keyframes:

@keyframes line-before {
  0% {
    width: 0;
    height: 0;
    border-top-color: #000;
  }

  9.9% {
    border-right-color: transparent;
  }

  10% {
    width: 100%;
    border-right-color: #000;
    border-top-color: #000;
    height: 0;
  }

  20%,100% {
    width: 100%;
    border-right-color: #000;
    border-top-color: #000;
    height: 100%;
  }

  40% {
    width: 100%;
    border-right-color: #000;
    border-top-color: #000;
    height: 100%;
    border-radius: 0;
  }

  //在執行到50%的時候變圓
  50%, 100% {
    width: 100%;
    border-right-color: #000;
    border-top-color: #000;
    height: 100%;
    border-radius: 50%;
  }
}

@keyframes line-after {
  0%,19.9% {
    border-color: transparent;
    width: 0;
    height: 0;
  }
  20% {
    width: 0;
    height: 0;
    border-bottom-color: #000;
  }

  29.9% {
    border-left-color: transparent;
  }

  30% {
    width: 100%;
    border-left-color: #000;
    border-bottom-color: #000;
    height: 0;
  }

  40% {
    width: 100%;
    border-left-color: #000;
    border-bottom-color: #000;
    height: 100%;
    border-radius: 0;
  }

  //在執行到50%的時候變圓
  50%, 100% {
    border-radius: 50%;
    width: 100%;
    border-left-color: #000;
    border-bottom-color: #000;
    height: 100%;
  }
}

內部圖案出現效果

這個直接調一下透明度即可：

@keyframes left-right-fade {
  0%, 50%{
    opacity: 0;
  }

  75%, 100% {
    opacity: 1;
  }
}

旋轉效果

@keyframes spin {
  0%, 75%{
    transform:rotate(0deg);
  }

  90%, 100% {
    transform:rotate(360deg);
  }
}

所有樣式程式碼

//author: 王樂平
//date: 2017.8.1
//blog: http://blog.csdn.net/lecepin

@border-width:2px;
@loader-width:150px;
@loader-insider-width:@loader-width * 0.15;
@animate-time:4s;

*{
  margin: 0;
  padding: 0;
  border: 0;
}

html, body{
  width: 100%;
  height: 100%;
}

#loader{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    padding: 1.5em;
    font-family: Arial;
  }

  .logo{
    width: @loader-width;
    height: @loader-width;
    position: relative;
    animation: spin @animate-time infinite;
    animation-direction: alternate;
    animation-timing-function:ease;

    &:before{
      position: absolute;
      content: '';
      left: 0;
      top: 0;
      border-color: transparent;
      border-width: @border-width;
      border-style: solid;
      animation: line-before @animate-time infinite;
      animation-direction: alternate;
    }

    &:after{
      position: absolute;
      content: '';
      bottom: -2 * @border-width;
      right: -2 * @border-width;
      border-color: transparent;
      border-width: @border-width;
      border-style: solid;
      animation: line-after @animate-time infinite;
      animation-direction: alternate;
    }

    .left{
      position: absolute;
      width: 50%;
      height: 100%;
      top: @border-width;
      right: 50%;
      background-color: #000;
      border-top-left-radius: 100% 50%;
      border-bottom-left-radius: 100% 50%;
      animation: left-right-fade @animate-time infinite;
      animation-direction: alternate;

      &:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 50%;
        bottom: 0;
        left: 50%;
        border-radius: 50%;
        background-color: #000;
      }

      &:after{
        position: absolute;
        content: '';
        width: @loader-insider-width;
        height: @loader-insider-width;
        background-color: #fff;
        bottom: ~'calc(25% - @{loader-insider-width} / 2)';
        left: ~'calc(100% - @{loader-insider-width} / 2)';
        border-radius: 50%;
      }      
    }

    .right{
      position: absolute;
      width: 50%;
      height: 100%;
      top: @border-width;
      left: 50%;
      border-top-right-radius: 100% 50%;
      border-bottom-right-radius: 100% 50%;
      animation: left-right-fade @animate-time infinite;
      animation-direction: alternate;

      &:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 50%;
        top: 0;
        right: 50%;
        border-radius: 50%;
        background-color: #fff;
      }

      &:after{
        position: absolute;
        content: '';
        width: @loader-insider-width;
        height: @loader-insider-width;
        background-color: #000;
        top: ~'calc(25% - @{loader-insider-width} / 2)';
        right: ~'calc(100% - @{loader-insider-width} / 2)';
        border-radius: 50%;
      }    
    }  
  }  
}

@keyframes line-before {
  0% {
    width: 0;
    height: 0;
    border-top-color: #000;
  }

  9.9% {
    border-right-color: transparent;
  }

  10% {
    width: 100%;
    border-right-color: #000;
    border-top-color: #000;
    height: 0;
  }

  20%,100% {
    width: 100%;
    border-right-color: #000;
    border-top-color: #000;
    height: 100%;
  }

  40% {
    width: 100%;
    border-right-color: #000;
    border-top-color: #000;
    height: 100%;
    border-radius: 0;
  }

  50%, 100% {
    width: 100%;
    border-right-color: #000;
    border-top-color: #000;
    height: 100%;
    border-radius: 50%;
  }
}

@keyframes line-after {
  0%,19.9% {
    border-color: transparent;
    width: 0;
    height: 0;
  }
  20% {
    width: 0;
    height: 0;
    border-bottom-color: #000;
  }

  29.9% {
    border-left-color: transparent;
  }

  30% {
    width: 100%;
    border-left-color: #000;
    border-bottom-color: #000;
    height: 0;
  }

  40% {
    width: 100%;
    border-left-color: #000;
    border-bottom-color: #000;
    height: 100%;
    border-radius: 0;
  }

  50%, 100% {
    border-radius: 50%;
    width: 100%;
    border-left-color: #000;
    border-bottom-color: #000;
    height: 100%;
  }
}

@keyframes left-right-fade {
  0%, 50%{
    opacity: 0;
  }

  75%, 100% {
    opacity: 1;
  }
}

@keyframes spin {
  0%, 75%{
    transform:rotate(0deg);
  }

  90%, 100% {
    transform:rotate(360deg);
  }
}

部落格名稱：王樂平部落格

CSDN部落格地址：http://blog.csdn.net/lecepin

知識共享許可協議
本作品採用 知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。

相關推薦

CSS動畫實戰：建立一個太極Loading圖

這裡主要是使用CSS的animation和偽類來構建，分析設定關鍵幀的執行順序和時間段。 效果 動畫分析 首先通過效果對動畫執行進行一下分析： 邊框的四條邊進行按順序動畫載入 。 矩形邊框變為圓行邊框。 太極圖內部圖案漸漸出現。

anime.js 實戰：實現一個帶有描邊動畫效果的復選框

由於 圓角 理解 http 中心 timeline 實例 描邊 evel 在網頁或者是APP的開發中，動畫運用得當可以起到錦上添花的作用。正確使用動畫，不但可以有助於用戶理解交互的作用，還可以大大提高網頁應用的魅力和使用體驗。並且在現在的網頁開發中，動畫已經成為了一個設計的

M 語言實戰小例：建立一個自增長日曆

在資料分析中時間是一個很重要的向量，很多分析表單都需要使用時間點進行建立。例如統計銷售情況時就要按照日期進行統計；公司的財務表單也離不開時間軸。在用Power BI進行資料分析時常會建立一個單獨的日曆表單，這個日曆表單通常以天為單位，從一個特定時間開始，到當前日

anime.js 實戰：實現一個帶有描邊動畫效果的複選框

在網頁或者是APP的開發中，動畫運用得當可以起到錦上添花的作用。正確使用動畫，不但可以有助於使用者理解互動的作用，還可以大大提高網頁應用的魅力和使用體驗。並且在現在的網頁開發中，動畫已經成為了一個設計的標準，變得越來越重要。特別是在一些和使用者互動的地方，使用動

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

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

css動畫效果：實現鼠標移入菜單欄文字下出現下劃線

boa 代碼 active lock osi int 事件 type 添加 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

scrapy爬蟲框架（二）：建立一個scrapy爬蟲

在建立新的scrapy爬蟲之前，我們需要先了解一下建立一個scrapy爬蟲的基本步驟 一、確定要爬取的資料 以爬取豆瓣電影資料為例： 每部電影所要爬取的資訊有： 片名:《頭號玩家》 導演: 史蒂文·斯皮爾伯格 編劇: 扎克·佩恩 / 恩斯特·克萊

例項：建立一個表格，分頁顯示資料（MongoDB資料庫儲存），功能：實現增刪改查

需求：建立一個表格，分頁顯示資料，功能：實現增刪改查 效果圖： 自動建立一個專案 命令列： express mongodb-demo --view=ejs cd mongodb-demo npm install npm install mongodb --save npm sta

Oracle：建立一個只有檢視許可權的使用者

因為工作中測試環境和開發環境是分開的，所以開發有時處理bug時需要連線測試資料庫，這樣出現一個問題是有些開發會為了驗證某些問題任意改動資料庫的表和欄位，對測試庫造成汙染。為了能夠讓開發連線測試環境，同時又不汙染測試庫，可以給其提供一個只有檢視許可權(視情況開放其他許可權)的使用者 1.首先登陸sy

Spring Boot （基礎篇）：建立一個簡單的SpringBoot專案

Spring Boot建立   首先IDEA新建一個專案，File-New-Project-Spring Initializr，然後Next，如下圖： 填寫專案資訊： 填寫專案使用到的技術，上面的SpringBoot版本建議選擇最新的穩定版，下面勾選上Web就可

作業系統（程序間共享儲存區的通訊）：建立一個共享儲存區，大小4個位元組（int大小）。建立一個子程序，然後子父程序獨自執行。父程序寫入一個數字到共享儲存區，子程序在共享儲存區把該數字讀出

題目：建立一個共享儲存區，大小4個位元組（int大小）。建立一個子程序，然後子父程序獨自執行。父程序寫入一個數字到共享儲存區，子程序在共享儲存區把該數字讀出。 程式碼量很少，純屬應付作業 筆者在telnet上寫這些程式碼，由於知識技術及英語太菜，不知道怎樣在telnet上覆製出來這些程式碼，

資料庫SQL實踐36：建立一個actor_name表

思路： 1.先按題目要求建立一個表actor_name; 2.然後從actor中選出first_name和last_name插入actor_name中。（注意點：這時沒有values。我也不太懂為什麼） create table actor_name ( first_name varch

例題：建立一個物件陣列，內放5個學生的資料（學號、成績），用指標指向陣列首元素，輸出第1,3,5個學生的資料。【面向物件設計】

題目： 建立一個物件陣列，內放5個學生的資料（學號、成績），用指標指向陣列首元素，輸出第1,3,5個學生的資料。 解答：  程式程式碼如下： #include <iostream>

插圖：建立一個動物派對場景

準備草圖 草圖在設計過程中是非常重要的，當然這一點不同的人由於設計的方式不同也會有些不同。剛開始的時候我也沒有繪製草圖的習慣，不過後來通過不斷地深入學習，意識到清晰的草圖可以幫助我構建更好的畫面。 用上色工具給草圖塗上顏色   當我對我的草圖感到滿意時，我喜歡粗略

IPFS：建立一個靜態網站

原文地址：https://blog.csdn.net/omnispace/article/details/79698681 在上一篇《如何在IPFS裡面上傳一張圖片》裡面介紹瞭如何搭建IPFS的應用環境，今天小編給大家介紹一下如何在IPFS上建立自己的個人網站，有過個人網站建立經歷的讀者都知道，

（轉）Gradle初探（一）：建立一個Gradle專案

http://www.jianshu.com/p/c0fc6a91d3e7 前兩天聽BOSS提到了Gradle，說論壇里人說"比Maven好"云云，故抽空試玩了下。 1. 環境準備 1.1. 先上Gradle官網下載最新版的程式，地址：https://gradle.org/gradle-

Win32 程式開發：建立一個應用程式視窗

1)簡單介紹建立應用程式的步驟 1.設計一個視窗類 2.註冊這個視窗類 3.建立應用程式視窗 4.更新顯示視窗 5.應用程式訊息迴圈 2)下面根據這個步驟進行建立一個應用程式視窗吧 /* 標頭檔案 */ #include <windows.h>

WatchKit入門：建立一個簡單的猜數遊戲

轉自：http://www.cocoachina.com/ios/20150202/11087.html 本文由cocoaChina譯者小組成員@TurtleFromMars 翻譯自Appcoda，原作者：julian engel，編者注：再過幾個月Apple Wa

Flask學習筆記：建立一個簡單的Flask應用

1. 做好準備工作進入專案主目錄啟用虛擬環境2. 建立app包：在flask中，含有名為 __init__.py 檔案的子目錄被視為包，可以被匯入。在命令列輸入以下命令，建立一個名為app的目錄：(venv) $ mkdir app在app目錄中建立一個名為__init__.

xlib/x11：建立一個監測鍵盤事件的視窗-4-視窗跳出的位置

XTranslateCoordinates(dpy, win, DefaultRootWindow(dpy), 0, 0, &pos_x, &pos_y, &child); log x: 38, y: 103 程式碼 /** * Phase 04 - M