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

使用Loader.css和css-spinners來(lái)制作加載動(dòng)畫(huà)的方法

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

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

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

201645113803473.gif (500×200)

使用方法

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

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元素加入動(dòng)畫(huà)class，如下：

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

改變加載動(dòng)畫(huà)顏色

此外你還要可以為loading動(dòng)畫(huà)加上顏色，代碼如下：

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

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

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

使用教程

CSS Spinners除了輕量級(jí)外，使用也十分的簡(jiǎn)單，下面來(lái)看看教學(xué)：

STEP 1: 引入CSS文件

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

單個(gè)動(dòng)畫(huà)引用，比如這里我們只需要心形圖案的加載樣式，對(duì)應(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，但一般情況下我們只引用一個(gè)就夠了。

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部分要加入對(duì)應(yīng)的loading樣式class即可

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

好了，就是這么簡(jiǎn)單，喜歡的可以放到你的項(xiàng)目上哦！

相關(guān)文章

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

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

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

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

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

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

最新評(píng)論