擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

以前說頁面是動態，基本都是說數據是從數據庫查詢的，不是寫死在html代碼里面的。現在的說頁面動態，一般會問：你是說數據，還是效果動態？

好的前端動畫效果，能給用戶帶來非常舒適的體驗效果，更甚者，有用戶覺的你這個動畫效果非常nice，反復操作，就為看你這個動畫。停留時間，預覽量上了，帶來的收益也不是一丁點吧。

當然也不用為了動畫，而額外的來制作動畫效果。比如一個彈框，可以直接漸變出現的，你還加了飛了一圈出現，那就是不必要的動畫了。

所以恰大好處的動畫效果，能帶來非常不錯的效果。

下面我們來學習如果只做一些簡單的動畫效果：

grid布局

上圖的動畫，就是一個簡單的loading加載效果，而且是一個3x3的九宮格。是因為旋轉才變成一個菱形的樣子。我們先來畫出3x3的九宮格：

html

<div class="loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

這里用9個span來做每個格子元素。

css

body {
 margin: 0;
 height: 100vh; /*=100%*/
 display: flex; /*flex布局*/
 align-items: center; /*flex布局：垂直居中*/
 justify-content: center; /*flex布局：水平居中*/
 background-color: black;
}
.loading {
 width: 10em;
 height: 10em;
 display: grid; /*grid布局*/
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.5em; /*grid 每個item之間的間距*/
}
/**
* --name 是css中定義變量的方式
* 可以直接用 var(--name) 使用
*/
.loading span {
 background-color: var(--color); /*背景顏色*/
}
.loading span:nth-child(2n+2) {
 /*n=0: 2*/
 /*n=1: 4*/
 /*n=2: 6*/
 /*n=3: 8*/
 /*n=4: 10(不存在)*/
 --color: #f13f84;
}
.loading span:nth-child(4n+3) {
 /*n=0: 3*/
 /*n=1: 7*/
 /*n=2: 11(不存在)*/
 --color: #46b0ff;
}
.loading span:nth-child(4n+1) {
 /*n=0: 1*/
 /*n=1: 5*/
 /*n=2: 9*/
 /*n=3: 13(不存在)*/
 --color: #44bb44;
}

grid-template-columns: 該屬性是基于 網格列. 的維度，去定義網格線的名稱和網格軌道的尺寸大小。

repeat: 表示網格軌道的重復部分，以一種更簡潔的方式去表示大量而且重復列的表達式。

有了九宮格布局后，我們直接旋轉這個loading元素，制作動畫。

CSS3動畫

.loading {
 ...
 transform: rotate(45deg); /*旋轉45°*/
}
.loading span {
 background-color: var(--color);
 /**
 * 動畫名字是blinking
 * 動畫整個時間是2s
 * 每個元素的執行延時時間 var(--delay)
 * 動畫的速度曲線 由慢到快 ease-in-out
 * 永久執行 infinite
 */
 animation: blinking 2s var(--delay) ease-in-out infinite;
 animation-fill-mode: backwards;
}
/**
* 每個元素執行動畫延時時間變量
*/
.loading span:nth-child(7) {
 --delay: 0s;
}
.loading span:nth-child(4n+4) {
 --delay: 0.2s;
}
.loading span:nth-child(4n+1) {
 --delay: 0.4s;
}
.loading span:nth-child(4n+2) {
 --delay: 0.6s;
}
.loading span:nth-child(3) {
 --delay: 0.8s;
}
/**
* 動畫效果
*/
@keyframes blinking {
 0%, 20% {
 transform: rotate(0deg) scale(0);
 }
 40%, 80% {
 /*
 * 旋轉一圈rotate(1turn)[轉、圈（Turns）。一個圓共1圈]
 * 縮放 scale 如果大于1就代表放大；如果小于1就代表縮小
 */
 transform: rotate(1turn) scale(1);
 }
 100% {
 transform: rotate(2turn) scale(0);
 }
}

animation語法

animation: name duration timing-function delay iteration-count direction;

1、animation-name 規定需要綁定到選擇器的 keyframe 名稱。

2、animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。

3、animation-timing-function 規定動畫的速度曲線。

4、animation-delay 規定在動畫開始之前的延遲。

5、animation-iteration-count 規定動畫應該播放的次數。

6、animation-direction 規定是否應該輪流反向播放動畫。

動畫的速度曲線

1、linear 規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）。(勻速)

2、ease 規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相對于勻速，中間快，兩頭慢）。

3、ease-in 規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）（相對于勻速，開始的時候慢，之后快）。

4、ease-out 規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）（相對于勻速，開始時快，結束時候間慢，）。

5、ease-in-out 規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相對于勻速，（開始和結束都慢）兩頭慢）。

6、cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

總結

CSS3動畫基礎知識可以看看 《如何快速上手基礎的CSS3動畫》 這篇文章，里面用更小的示例，講述了CSS3動畫的每個屬性。CSS3動畫，無外乎就是animation、transform、transition等屬性的使用，記住他們每個的作用特效就可以了。

喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！

言

loading效果在實際開發中是很常見的，尤其是在Ajax請求的時候，可以給用戶一個很好的交互體驗。

今天這篇文章我們一起來看看如何通過CSS3實現各種不同的loading效果吧，文章中的代碼可以從github自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html

CSS3

實現效果

首先我們來看看需要實現的效果。

效果圖

然后我們一個個來看都是怎么實現的吧。

loadingA

loadingA的效果就如音樂播放時的動態條一般，不停的連續執行。

其主要實現思路如下：

• 每個豎狀條都是一個簡單的div，div為一個小的圓形。

• 給每個div加上一個動畫效果，該動畫的效果是高度逐漸變長，最后再變回原樣。

• 每個div延遲不同的時間才開始執行，這樣就會有先后的層次感。

然后我們來看看各個部分的代碼實現。

• 基本的div元素

基本的div元素是一個小的圓形。

基本的div元素

• 定義動畫

定義的動畫主要是改變div的高度，在完成50%的時候達到最高值，完成100%時恢復到原來高度。

動畫效果

• 設置動畫

將定義的動畫添加至animation屬性，設置一個動畫總執行時間，然后給5個div設置不同的延時時間。

設置動畫

• HTML元素

將以上設置的CSS屬性都添加至HTML元素中。

HTML元素

將以上代碼寫完后，直接在瀏覽器運行就可以看到如loadingA的效果了。

loadingB

如果細心的看完loadingA的實現過程，一定可以聯想到loadingB的實現。

loadingA是通過給高度加動畫，那么loadingB就是通過給寬度加動畫，同樣給5個div不同的延遲時間。

這里我只給出其動畫定義，其他的內容與loadingA類似，詳細的內容可以通過github去看。

loadingB動畫

loadingC

loadingC的實現效果如下。

loadingC

在loadingA和loadingB中是通過給高度和寬度增加動畫實現的，而loadingC是通過給五個div增加縱向位移實現的。

loadingC實現的關鍵點就在于translateY的使用，因為動畫是從下往上跳動，所以在完成度50%時，translateY設定為負值。

其定義的動畫部分代碼如下所示。

定義動畫

loadingD

loadingD的實現效果如下。

loadingD效果

通過效果圖我們發現有兩點差異：

• loading過程中透明度會發生變化，這個通過opacity實現。

• 在接近完成時有個上下輕微抖動的效果，這個通過設置小單位的正負translateY值。

得到的動畫代碼如下。

loadingD動畫

loadingE

loadingE的動畫效果如下。

loadingE

loadingE的效果同loadingD類似，loadingD是通過縱向的位移變換，可以通過translateY實現。

loadingE是通過水平方向位移變換，可以通過translateX來實現。

而有一點不同的是，loadingE的div初始位置就是translateX(-300px)，表示從左側開始運動。

loadingE動畫

loadingF

loadingF定義的動畫如下所示。

loadingF

loadingF是旋轉效果，可以很容易想到是通過rotate實現。

loadingF中只有一個div，邊框設置為虛線即可，其CSS樣式如下。

loadingF基本樣式

其定義的動畫樣式如下。

loadingF定義動畫

loadingG&loadingH

loadingG與loadingH的動畫效果如下。

loadingG&loadingH

loadingG與loadingH類似，loadingH在loadingG的基礎上增加了幾個點。

loadingG中是通過設置一個縱向的div-1，在該div-1內增加一個div-2，div-2就是轉動的圓點，div-2通過絕對定位計算出實際位置，當div-1大小變化時，div-2也應該重新計算位置。

div-2的CSS代碼如下所示。

loadingG基本樣式

在loadingH中，div-1內有四個div，分別表示轉動的四個圓點，也是通過絕對定位計算偏移位置。

最后設置動畫，只需要讓div-1在一個動畫周期內旋轉360度即可。

loadingG

loadingI

loadingI的效果圖如下所示。

loadingI

loadingI的動畫主要涉及到放大縮小和旋轉兩個方面，放大縮小通過scale實現，旋轉通過rotate實現。具體的可以看看github上的完整代碼。

結束語

今天這篇文章主要是教大家如何使用CSS3的動畫特性去實現loading效果，完全可以不用借助于第三方庫，大家也動動手自己實現一下吧。

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

昨天再次收到"月球居民愛麗絲"的投稿(非常感謝"月球居民愛麗絲")，希望做一個冰淇淋加載動畫，原圖：

看到如此美麗的冰淇淋是否想吃了？哈哈，大冬天的，還是不要了。今天我們就用CSS來制作一個冰淇淋吧。

解析

1、 拋開動畫部分，冰淇淋分為2部分，能吃的冰淇淋和下方的木棍（都是可以直接用樣式畫出的）

2、 動畫部分，細數有4種顏色，紅色、米色、藍色、橙色。

3、 冰淇淋左上方的高光效果

通過這樣的解析，你是不是也可以制作一個簡單冰淇淋了呢？

下面我們按步驟實現。

第一步（結構）

<div class="ice-cream"> 
 <div class="body"></div> 
 <div class="footer"></div> 
</div>

按照解析，我們把它也分成上下結構2部分，身體（冰淇淋）、腳（木棍）。

.ice-cream{ 
 width: 50px; 
 height: 120px; 
 margin: 100px auto; 
} 
.body{ 
 margin: 0 auto; 
 width: 50px; 
 height: 100px; 
 border-radius: 30px 30px 10px 10px; 
 background: red; 
} 
.footer{ 
 width: 10px; 
 height: 15px; 
 margin: 0 auto; 
 border-radius: 0 0 4px 4px; 
 background: #a77b64; 
}

這個效果相信很多小伙伴都會實現，2部分都是通過border-radius圓角來改變形狀。這里就不做多的說明了。

第二步（動畫）

同理，按解析，我們添加4種顏色到冰淇淋上面。

... 
<div class="body"> 
 <div class="loading"> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 </div> 
</div>

添加不同顏色

.body{ 
 position: relative; 
 ... 
} 
... 
.loading{ 
 position: absolute; 
 width: 200px; 
} 
.loading .line{ 
 height: 40px; 
} 
.loading .line:nth-child(1){ 
 background: #ff7632; 
} 
.loading .line:nth-child(2){ 
 background: #46b0ff; 
} 
.loading .line:nth-child(3){ 
 background: #fffce5; 
} 
.loading .line:nth-child(4){ 
 background: red; 
}

發現把我們的整個冰淇淋都個蓋住了，這時只需要添加overflow: hidden;即可。

.body{ 
 ... 
 overflow: hidden; 
}

然后我們把顏色部分旋轉一個角度，并且使其動起來。

.loading{ 
 position: absolute; 
 width: 200px; 
 top: -77px; 
 left: -89px; 
 transform: rotate(45deg); 
 animation: move 2.5s linear infinite; 
} 
@keyframes move{ 
 from { 
 top: -77px; 
 left: -89px; 
 } 
 to { 
 top: 9px; 
 left: -84px; 
 } 
}

這時候你會發現怎么調整，動畫中間都會有斷層。

所以我的解決方案是，重新copy一份顏色，讓其可持續循環的。

<div class="loading"> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
</div>
.loading{ 
 position: absolute; 
 top: -213px; 
 left: -27px; 
 width: 200px; 
 transform: rotate(45deg); 
 animation: move 2.5s linear infinite; 
} 
@keyframes move{ 
 from { 
 top: -213px; 
 left: -27px; 
 } 
 to { 
 top: -46px; 
 left: -83px; 
 } 
} 
.loading .line{ 
 height: 40px; 
} 
.loading .line:nth-child(1), 
.loading .line:nth-child(5){ 
 background: #ff7632; 
} 
.loading .line:nth-child(2), 
.loading .line:nth-child(6){ 
 background: #46b0ff; 
} 
.loading .line:nth-child(3), 
.loading .line:nth-child(7){ 
 background: #fffce5; 
} 
.loading .line:nth-child(4), 
.loading .line:nth-child(8){ 
 background: red; 
}

第三步（高光效果）

這個就是在body上面添加一個圓弧。

大家應該都看過前面的CSS3動畫解析抖音 LOGO制作文章了，這里面有制作圓弧的示例。

.body:before{ 
 position: absolute; 
 content: ""; 
 width: 25px; 
 height: 25px; 
 border: 5px solid #fff; 
 border-right: 5px solid transparent; 
 border-top: 5px solid transparent; 
 border-left: 5px solid transparent; 
 border-radius: 100%; 
 top: 5px; 
 left: 5px; 
 transform: rotate(120deg); 
 opacity: 0.7; 
 z-index: 10; 
}

利用border畫出1/4的圓，就可以啦。

最終效果：

不知道大家有沒有get到每次開發的小經驗了？開發前先分析，分小步驟，完成各個功能點。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”