整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
oading動畫在頁面過度等經常會用到，我在工作中就寫過很多有趣的loading加載動畫，在這里，我就分享一個波浪效果的loading動畫寫法（在寫動畫前，可以先畫個草稿或動畫流程圖，充分思考動畫執行的過程，再編寫代碼事半功倍哦）。
css3編寫的loading動畫
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
1、讓loading居中顯示，同時讓它變成flex容器，這樣span就能設置寬高。
.loading{display: flex; width: 100px; height: 50px; position: absolute; top:50%; left: 50%; transform: translate(-50px,-25px);}
2、分析下這10個span的動畫過程：我們把動畫從開始到結束分成100份，0%的時候高度幾乎沒有，位置靠左，高度由小變大，大概15%的時候，突然變很高，顏色很深，并且右移很多，然后依次變矮，變淺，左移，以此類推。通過這個分析，我們寫起來就有方向了。
2、根據動畫效果和剛才的分析，10個span平分loading的寬度，高度我們就寫和loading一樣的高度，然后利用scaleY將它縮小，初始深點的背景色，在動畫結束時，我們將顏色設置的很淺（顏色過渡建議同色系深淺變化或者相鄰色系變化，比較自然好看，不建議顏色過渡特別大）。同時設置translateX也向左平移10像素（數值可以自己調整）。設置animation的動畫時間為1.5秒，動畫播放次數為無限次，動畫效果為先慢后快再慢。重點：10個span的動畫是以此執行，這里我們利用css3的var變量（文章末尾我們再來簡單了解下這個css3 var以及css3計算calc）來動態編寫動畫延時：
.loading span {
width: 10px;
height: 50px;
background-color: #308dec;
transform: scaleY(0.01) translateX(-10px);
animation: load-ani 1.5s infinite ease-in-out;
animation-delay: calc(var(--n) * 0.05s);
}
3、分別設置十個span的延時時間（后面分析var的時候再來討論為什么這么寫）
.loading span:nth-child(1) { --n: 1; }
.loading span:nth-child(2) { --n: 2; }
.loading span:nth-child(3) { --n: 3; }
.loading span:nth-child(4) { --n: 4; }
.loading span:nth-child(5) { --n: 5; }
.loading span:nth-child(6) { --n: 6; }
.loading span:nth-child(7) { --n: 7; }
.loading span:nth-child(8) { --n: 8; }
.loading span:nth-child(9) { --n: 9; }
.loading span:nth-child(10) { --n: 10; }
4、最后來寫animate動畫，有了前面詳細的分析，這里就沒什么好解釋的了，高度從0.01倍過渡到1.2倍再過渡到初始的0.01倍，1.2倍是從15%開始的，所以才有了上面的“突然”的效果。至此loading動畫就寫完了。
@keyframes load-ani {
0%, 100% {
transform: scaleY(0.01) translateX(-10px);
}
15% {
transform: scaleY(1.2) translateX(20px);
}
90%, 100% {
background-color: #aed4fb;
}
}
我們重點來分析下span動畫依次執行的原理，先來說下css3 的 var 變量，先看下面的代碼：
div{
--green: #4CAF50;
background-color: var(--green);
}
設置div的背景色為#4CAF50。這里的--green就是一個變量，變量名是green，值是“#4CAF50”，“--”是css3規定的變量的前綴，而var()里面放的是變量名，表示使用這個變量的值，當然，還有一些用法，如默認值等，這個關注IT學堂，我們將會在后面的文章中專門介紹css3 var的用法。
calc比var要出名，用過的人一定很多，它能進行css的一些計算，如加減乘除，需要注意的是，操作符左右要有空格，否則不起作用，如：
calc(10px + 10px) //20px calc(10px+10px) //錯誤
理解了var和calc，就很簡單了：calc(var(--n) * 0.05s) 其實就是拿變量n*0.05s，而n則在第三步對每個span都進行了設置，隨著n的不斷變大，延時時間也就依次變長。
好了，今天的教程就到這里了，不知道您有收獲沒。有疑問和建議的，可以在下方留言。關注IT學堂，每天都有干貨哦！
loading效果在實際開發中是很常見的，尤其是在Ajax請求的時候，可以給用戶一個很好的交互體驗。
今天這篇文章我們一起來看看如何通過CSS3實現各種不同的loading效果吧，文章中的代碼可以從github自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html
CSS3
首先我們來看看需要實現的效果。
效果圖
然后我們一個個來看都是怎么實現的吧。
loadingA的效果就如音樂播放時的動態條一般，不停的連續執行。
其主要實現思路如下：
每個豎狀條都是一個簡單的div，div為一個小的圓形。
給每個div加上一個動畫效果，該動畫的效果是高度逐漸變長，最后再變回原樣。
每個div延遲不同的時間才開始執行，這樣就會有先后的層次感。
然后我們來看看各個部分的代碼實現。
基本的div元素
基本的div元素是一個小的圓形。
基本的div元素
定義動畫
定義的動畫主要是改變div的高度，在完成50%的時候達到最高值，完成100%時恢復到原來高度。
動畫效果
設置動畫
將定義的動畫添加至animation屬性，設置一個動畫總執行時間，然后給5個div設置不同的延時時間。
設置動畫
HTML元素
將以上設置的CSS屬性都添加至HTML元素中。
HTML元素
將以上代碼寫完后，直接在瀏覽器運行就可以看到如loadingA的效果了。
如果細心的看完loadingA的實現過程，一定可以聯想到loadingB的實現。
loadingA是通過給高度加動畫，那么loadingB就是通過給寬度加動畫，同樣給5個div不同的延遲時間。
這里我只給出其動畫定義，其他的內容與loadingA類似，詳細的內容可以通過github去看。
loadingB動畫
loadingC的實現效果如下。
loadingC
在loadingA和loadingB中是通過給高度和寬度增加動畫實現的，而loadingC是通過給五個div增加縱向位移實現的。
loadingC實現的關鍵點就在于translateY的使用，因為動畫是從下往上跳動，所以在完成度50%時，translateY設定為負值。
其定義的動畫部分代碼如下所示。
定義動畫
loadingD的實現效果如下。
loadingD效果
通過效果圖我們發現有兩點差異：
loading過程中透明度會發生變化，這個通過opacity實現。
在接近完成時有個上下輕微抖動的效果，這個通過設置小單位的正負translateY值。
得到的動畫代碼如下。
loadingD動畫
loadingE的動畫效果如下。
loadingE
loadingE的效果同loadingD類似，loadingD是通過縱向的位移變換，可以通過translateY實現。
loadingE是通過水平方向位移變換，可以通過translateX來實現。
而有一點不同的是，loadingE的div初始位置就是translateX(-300px)，表示從左側開始運動。
loadingE動畫
loadingF定義的動畫如下所示。
loadingF
loadingF是旋轉效果，可以很容易想到是通過rotate實現。
loadingF中只有一個div，邊框設置為虛線即可，其CSS樣式如下。
loadingF基本樣式
其定義的動畫樣式如下。
loadingF定義動畫
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的動畫主要涉及到放大縮小和旋轉兩個方面，放大縮小通過scale實現，旋轉通過rotate實現。具體的可以看看github上的完整代碼。
今天這篇文章主要是教大家如何使用CSS3的動畫特性去實現loading效果，完全可以不用借助于第三方庫，大家也動動手自己實現一下吧。
擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
以前說頁面是動態，基本都是說數據是從數據庫查詢的，不是寫死在html代碼里面的。現在的說頁面動態，一般會問：你是說數據，還是效果動態？
CSS3 Grid布局實現Loading動畫效果
好的前端動畫效果，能給用戶帶來非常舒適的體驗效果，更甚者，有用戶覺的你這個動畫效果非常nice，反復操作，就為看你這個動畫。停留時間，預覽量上了，帶來的收益也不是一丁點吧。
當然也不用為了動畫，而額外的來制作動畫效果。比如一個彈框，可以直接漸變出現的，你還加了飛了一圈出現，那就是不必要的動畫了。
所以恰大好處的動畫效果，能帶來非常不錯的效果。
下面我們來學習如果只做一些簡單的動畫效果：
CSS3 Grid布局實現Loading動畫效果
CSS3 Grid布局實現Loading動畫效果
上圖的動畫，就是一個簡單的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;
}
CSS3 Grid布局實現Loading動畫效果
grid-template-columns: 該屬性是基于 網格列. 的維度，去定義網格線的名稱和網格軌道的尺寸大小。
repeat: 表示網格軌道的重復部分，以一種更簡潔的方式去表示大量而且重復列的表達式。
有了九宮格布局后，我們直接旋轉這個loading元素，制作動畫。
.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 規定是否應該輪流反向播放動畫。
CSS3 Grid布局實現Loading動畫效果
動畫的速度曲線
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 Grid布局實現Loading動畫效果
CSS3動畫基礎知識可以看看 《如何快速上手基礎的CSS3動畫》 這篇文章，里面用更小的示例，講述了CSS3動畫的每個屬性。CSS3動畫，無外乎就是animation、transform、transition等屬性的使用，記住他們每個的作用特效就可以了。
喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
