站長資訊網在之前的文章《利用CSS3創建炫酷的三角背景圖像》中，我們介紹了使用CSS3創建炫酷的三角背景的方法。這次我們繼續CSS3效果分享，看看利用利用純CSS3如何實現加載動畫效果，感興趣的可以學習了解一下~
在進入網站時，因為需要顯示許多圖片，往往需要加載一段時間。如果這里添加一個動態的加載效果，這樣就不會讓等待變得枯燥。例如下圖這樣：
本篇文章就來給大家分享兩種使用CSS3實現的加載動畫效果。這兩種方法都是利用animation和@keyframes來實現，下面我們來看看實現代碼：
第一種效果的實現方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> html, body { padding: 0; height: 100%; display: table; margin: 0 auto; font-size: 52px; font-family: Monaco, Consolas, "Lucida Console", monospace; background-image: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/kindajean.png"); } .loading { text-align: center; display: table-cell; vertical-align: middle; text-shadow: grey 1px 1px 1px; } .letter { float: left; width: 35px; height: 60px; position: relative; -webkit-animation: flip 2s infinite; -webkit-transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; } .letter div { width: 100%; height: 100%; position: absolute; -webkit-transform: translate(0); -webkit-backface-visibility: hidden; -webkit-animation: color 8s infinite; } .letter div.back { -webkit-transform: rotateY(180deg); } .letter:nth-child(1), .letter:nth-child(1) div { -webkit-animation-delay: 0.125s; } .letter:nth-child(2), .letter:nth-child(2) div { -webkit-animation-delay: 0.25s; } .letter:nth-child(3), .letter:nth-child(3) div { -webkit-animation-delay: 0.375s; } .letter:nth-child(4), .letter:nth-child(4) div { -webkit-animation-delay: 0.5s; } .letter:nth-child(5), .letter:nth-child(5) div { -webkit-animation-delay: 0.625s; } .letter:nth-child(6), .letter:nth-child(6) div { -webkit-animation-delay: 0.75s; } .letter:nth-child(7), .letter:nth-child(7) div { -webkit-animation-delay: 0.875s; } .letter:nth-child(8), .letter:nth-child(8) div { -webkit-animation-delay: 1s; } .letter:nth-child(9), .letter:nth-child(9) div { -webkit-animation-delay: 1.125s; } .letter:nth-child(10), .letter:nth-child(10) div { -webkit-animation-delay: 1.25s; } @-webkit-keyframes flip { 0% { -webkit-transform: rotateY(0deg) translate(0); } 40%, 100% { -webkit-transform: rotateY(180deg) translate(0); } } @-webkit-keyframes color { 0% { color: #88E488; } 25% { color: #EEADB7; } 50% { color: #90C9DB; } 75% { color: #F3B034; } 100% { color: #828282; } } </style> </head> <body> <div class="loading"> <div class="letter"> <div>L</div> <div class="back">L</div> </div> <div class="letter"> <div>o</div> <div class="back">o</div> </div> <div class="letter"> <div>a</div> <div class="back">a</div> </div> <div class="letter"> <div>d</div> <div class="back">d</div> </div> <div class="letter"> <div>i</div> <div class="back">i</div> </div> <div class="letter"> <div>n</div> <div class="back">n</div> </div> <div class="letter"> <div>g</div> <div class="back">g</div> </div> <div class="letter dot"> <div>.</div> <div class="back">.</div> </div> <div class="letter dot"> <div>.</div> <div class="back">.</div> </div> <div class="letter dot"> <div>.</div> <div class="back">.</div> </div> </div> </body> </html>
-
在上面代碼中，先使用兩個animation屬性給每個字綁定兩種動畫flip和color，分別控制翻轉動作和顏色變化；然后分別利用@keyframes規則，給兩個動畫設置每一幀的動作即可。
-
翻轉動作需要使用transform屬性來控制，它可以向元素應用 2D 或 3D 轉換。
效果如下：
下面的效果也是同一種實現思想，只是在細微處有點改變。
第二種效果的實現方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> html, body { padding: 0; height: 100%; display: table; margin: 0 auto; font-size: 52px; font-family: Monaco, Consolas, "Lucida Console", monospace; background: #F5F5F5; } .loading { top: 50%; left: 50%; width: 350px; height: 60px; font-size: 52px; position: absolute; text-align: center; margin-top: -30px; margin-left: -175px; text-shadow: #808080 1px 1px 1px; font-family: Monaco, Consolas, "Lucida Console", monospace; } .letter { float: left; width: 35px; height: 60px; position: relative; animation: flip 2s infinite; transform-style: preserve-3d; transition: transform 1s; } .letter div { color: #4B6; width: 100%; height: 100%; position: absolute; transform: translate(0); backface-visibility: hidden; animation: color 16s infinite; } .letter div.back { transform: rotateY(180deg); } .letter:nth-child(1), .letter:nth-child(1) div { animation-delay: 0.125s; } .letter:nth-child(2), .letter:nth-child(2) div { animation-delay: 0.25s; } .letter:nth-child(3), .letter:nth-child(3) div { animation-delay: 0.375s; } .letter:nth-child(4), .letter:nth-child(4) div { animation-delay: 0.5s; } .letter:nth-child(5), .letter:nth-child(5) div { animation-delay: 0.625s; } .letter:nth-child(6), .letter:nth-child(6) div { animation-delay: 0.75s; } .letter:nth-child(7), .letter:nth-child(7) div { animation-delay: 0.875s; } .letter:nth-child(8), .letter:nth-child(8) div { animation-delay: 1s; } .letter:nth-child(9), .letter:nth-child(9) div { animation-delay: 1.125s; } .letter:nth-child(10), .letter:nth-child(10) div { animation-delay: 1.25s; } @keyframes flip { 0% { transform: rotateY(0deg) translate(0); } 40%, 100% { transform: rotateY(180deg) translate(0); } } @keyframes color { 1.5% { color: #6AD; } 3%, 12.5% { color: #F80; } 14% { color: #4B6; } 15.5%, 25% { color: #F68; } 26.5% { color: #C83; } 28%, 37.5% { color: #96C; } 39% { color: #C83; } 40.5%, 50% { color: #E44; } 51.5% { color: #F80; } 53%, 62.5% { color: #4B6; } 64% { color: #F68; } 65.5%, 75% { color: #C83; } 76.5% { color: #96C; } 78%, 87.5% { color: #6AD; } 89% { color: #F80; } 90.5%, 100%, 0% { color: #4B6; } } </style> </head> <body> <div class="loader"> <div class="loading"> <div class="letter"> <div>L</div> <div class="back">L</div> </div> <div class="letter"> <div>o</div> <div class="back">o</div> </div> <div class="letter"> <div>a</div> <div class="back">a</div> </div> <div class="letter"> <div>d</div> <div class="back">d</div> </div> <div class="letter"> <div>i</div> <div class="back">i</div> </div> <div class="letter"> <div>n</div> <div class="back">n</div> </div> <div class="letter"> <div>g</div> <div class="back">g</div> </div> <div class="letter"> <div>.</div> <div class="back">.</div> </div> <div class="letter"> <div>.</div> <div class="back">.</div> </div> <div class="letter"> <div>.</div> <div class="back">.</div> </div> </div> </div> </body> </html>
效果如下：
下面介紹3個關鍵屬性animation、@keyframes和transform：
-
CSS3
animation（動畫） 屬性
語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name：指定要綁定到選擇器的關鍵幀的名稱 animation-duration：動畫指定需要多少秒或毫秒完成 animation-timing-function：設置動畫將如何完成一個周期 animation-delay：設置動畫在啟動前的延遲間隔。 animation-iteration-count：定義動畫的播放次數。 animation-direction：指定是否應該輪流反向播放動畫。 animation-fill-mode：規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 animation-play-state：指定動畫是否正在運行或已暫停。
-
@keyframes規則
使用@keyframes規則可以創建動畫。創建動畫是通過逐步改變從一個CSS樣式設定到另一個。簡單來說：@keyframes就是用來設置動畫每一幀動作的。
@keyframes需要和animation 屬性一起使用才能實現動畫：
@keyframe規則由關鍵字“@keyframe”組成，后面接著是給出動畫名稱的標識符（將使用animation-name引用），隨后是通過一組樣式規則（用大括號分隔）。然后，通過使用標識符作為animation-name屬性的值，將動畫應用于元素。例如：
/* 定義動畫*/ @keyframes 動畫名稱{ /* 樣式規則*/ } /* 將它應用于元素 */ .element { animation-name: 動畫名稱（在@keyframes中已經聲明好的）; /* 或使用動畫簡寫屬性*/ animation: 動畫名稱 1s ... }
-
CSS3
transform屬性
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
語法：transform: none|transform-functions;
none 定義不進行轉換。 matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 translate(x,y) 定義 2D 轉換。 translate3d(x,y,z) 定義 3D 轉換。 translateX(x) 定義轉換，只是用 X 軸的值。 translateY(y) 定義轉換，只是用 Y 軸的值。 translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。 scale(x,y) 定義 2D 縮放轉換。 scale3d(x,y,z) 定義 3D 縮放轉換。 scaleX(x) 通過設置 X 軸的值來定義縮放轉換。 scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。 scaleZ(z) 通過設置 Z 軸的值來定義 3D 縮放轉換。 rotate(angle) 定義 2D 旋轉，在參數中規定角度。 rotate3d(x,y,z,angle) 定義 3D 旋轉。 rotateX(angle) 定義沿著 X 軸的 3D 旋轉。 rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。 rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。 skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。 skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。 skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。 perspective(n) 為 3D 轉換元素定義透視視圖。
PHP中文網平臺有非常多的視頻教學資源，歡迎大家學習《css視頻教程》！
