欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Loader.css和css-spinners來制作加載動畫的方法

設(shè)計達(dá)人   發(fā)布時間：2016-04-05 11:28:48   作者：佚名   我要評論
這篇文章主要介紹了使用Loader.css和css-spinners來制作加載動畫的方法,基本上使用純CSS就可以實(shí)現(xiàn),簡單高效,需要的朋友可以參考下

Loader.css
當(dāng)網(wǎng)頁的頁面大小較大，用戶加載可能需要較長的時間，在這些情況下，我們一般會用到（加載）loading動畫，提示于用戶頁面在加載中，這些UX常識我想很多設(shè)計師都懂，但做一個GIF動畫有點(diǎn)麻煩，為了方便，看看今天分享的Loader.css，僅用CSS樣式就能實(shí)現(xiàn)一個loading動畫效果。
201645113639873.gif (500×271)

當(dāng)前有35個動畫效果，所以選擇還是挺多的。
201645113713408.gif (500×271)

201645113803473.gif (500×200)

使用方法

Step 1: 引入 loaders.min.css 和 loaders.css.js，這個JS僅是為了簡化動畫的DIV標(biāo)簽，如果不加這個JS，那么你的動畫就必須加上對應(yīng)數(shù)量DIV標(biāo)簽才能正常顯示動畫，所以建議加上，這樣語義化好會好些。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <link rel="stylesheet" type="text/css" href="loaders.min.css">   
  2. <script type="text/javascript" src="loaders.css.js"></script>  

Step 2: HTML代碼，給loading元素加入動畫class，如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="loader-inner ball-pulse"></div>  

改變加載動畫顏色

此外你還要可以為loading動畫加上顏色，代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .ball-grid-pulse > div {   
  2.  background: orange;   
  3. }  

css-spinners
如果你從Loader.css上找不到喜歡的樣式，那就看看今天小編分享的css-spinners，它自帶的CSS加載樣式很漂亮，圖案色彩豐富，花樣多多，就算不用它的CSS，也可以按它的動畫來做成GIF圖像。
201645113957068.png (500×351)

loading樣式有花形、心形、指針、圓形旋轉(zhuǎn)、進(jìn)度條以及常見的菊花加載圖案：
201645114016525.gif (500×369)

使用教程

CSS Spinners除了輕量級外，使用也十分的簡單，下面來看看教學(xué)：

STEP 1: 引入CSS文件

加載動畫樣式有單個以及全部，如果用戶只需要一個加載動畫，就選擇對應(yīng)的CSS文件。

單個動畫引用，比如這里我們只需要心形圖案的加載樣式，對應(yīng)樣式文件是heartbeat.css

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <head>  
  2.  ...   
  3.  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/heartbeat.css" type="text/css">  
  4. </head>  

全部加載樣式引用，樣式表文件是 spinners.css，但一般情況下我們只引用一個就夠了。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <head>  
  2.  ...   
  3.  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinners.css" type="text/css">  
  4. </head>  

STEP 2: HTML代碼

HTML部分要加入對應(yīng)的loading樣式class即可

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="heartbeat-loader">  
  2.  Loading…   
  3. </div>  

好了，就是這么簡單，喜歡的可以放到你的項目上哦！

相關(guān)文章

  • css 命名：BEM, scoped css, css modules 與 css-in-js詳解

    這篇文章主要介紹了css 命名：BEM, scoped css, css modules 與 css-in-js的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，,需要的朋友
    2020-08-24

  • CSS3制作ajax loader icon實(shí)現(xiàn)思路及代碼

    用到了兩個CSS3屬性transform、animation，實(shí)現(xiàn)原理為：transform控制每個小方塊在Y軸的偏移，rotate控制旋轉(zhuǎn)的角度，scale縮放至原大小的一半，具體祥看下文，希望對大家
    2013-08-25

  • 在vue-cli中使用css-loader實(shí)現(xiàn)css module

    這篇文章主要介紹了在vue-cli中使用css-loader實(shí)現(xiàn)css module,本文給大家介紹的非常想詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-01-07

最新評論