站長資訊網(wǎng)在之前的文章《如何使用CSS創(chuàng)建波浪背景？》中給大家介紹了怎么使用CSS創(chuàng)建波浪背景，有需要的朋友可以去閱讀了解一下~
那么本文將給大家介紹在前端開發(fā)過程中最常見的一種效果實現(xiàn)，也就是加載動畫的實現(xiàn)。
簡單來說，比如常見的網(wǎng)頁加載等待的效果loading…..，通常都是動態(tài)的加載效果。
下面我就給大家介紹一種非常簡單并且很基礎(chǔ)的加載動畫的效果實現(xiàn)方法：
直接上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <style> body { margin: 0; padding: 0; background: black; display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh; } .dot1, .dot2, .dot3 { background: #fff; width: 15px; height: 15px; border:double; border-color:black; border-radius: 50%; margin: 10px; } .dot1 { animation: jump 1.6s -0.32s linear infinite; background: #4B0082; } .dot2 { animation: jump 1.6s -0.16s linear infinite; background: #B22222; } .dot3 { animation: jump 1.6s linear infinite; background: #006400; } @keyframes jump { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(2.0); transform: scale(2.0); } } </style> </head> <body> <div class="dot1"> </div> <div class="dot2"></div> <div class="dot3"></div> </body> </html>
效果如下圖：
下面介紹兩個關(guān)鍵屬性：
-
CSS3
animation（動畫） 屬性
語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值 animation-name：指定要綁定到選擇器的關(guān)鍵幀的名稱 animation-duration：動畫指定需要多少秒或毫秒完成 animation-timing-function：設(shè)置動畫將如何完成一個周期 animation-delay：設(shè)置動畫在啟動前的延遲間隔。 animation-iteration-count：定義動畫的播放次數(shù)。 animation-direction：指定是否應(yīng)該輪流反向播放動畫。 animation-fill-mode：規(guī)定當(dāng)動畫不播放時（當(dāng)動畫完成時，或當(dāng)動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式。 animation-play-state：指定動畫是否正在運行或已暫停。 initial：設(shè)置屬性為其默認值。 inherit：從父元素繼承屬性。
-
CSS3
@keyframes規(guī)則
使用@keyframes規(guī)則可以創(chuàng)建動畫。創(chuàng)建動畫是通過逐步改變從一個CSS樣式設(shè)定到另一個。
在動畫過程中，可以更改CSS樣式的設(shè)定多次。指定的變化時發(fā)生時使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。
0％是開頭動畫，100％是當(dāng)動畫完成。為了獲得最佳的瀏覽器支持，應(yīng)該始終定義為0％和100％的選擇器。
注: 使用animation屬性來控制動畫的外觀，還使用選擇器綁定動畫。
語法：@keyframes animationname {keyframes-selector {css-styles;}}
值 animationname：必需的，定義animation的名稱。 keyframes-selector：必需的，動畫持續(xù)時間的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) 注意：可以用一個動畫keyframes-selectors。 css-styles：必需的，一個或多個合法的CSS樣式屬性。
PHP中文網(wǎng)平臺有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
