.
.
效果如下：
下面的效果也是同一種實現(xiàn)思想，只是在細微處有點改變。
第二種效果的實現(xiàn)方法：
L
L
o
o
a
a
d
d
i
i
n
n
g
g
.
.
.
.
.
.
效果如下：
下面介紹3個關(guān)鍵屬性animation、@keyframes和transform：
語法：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：指定動畫是否正在運行或已暫停。
使用@keyframes規(guī)則可以創(chuàng)建動畫。創(chuàng)建動畫是通過逐步改變從一個CSS樣式設(shè)定到另一個。簡單來說：@keyframes就是用來設(shè)置動畫每一幀動作的。
@keyframes需要和animation 屬性一起使用才能實現(xiàn)動畫：
@keyframe規(guī)則由關(guān)鍵字“@keyframe”組成，后面接著是給出動畫名稱的標(biāo)識符（將使用animation-name引用），隨后是通過一組樣式規(guī)則（用大括號分隔）。然后，通過使用標(biāo)識符作為animation-name屬性的值，將動畫應(yīng)用于元素。例如：
/* 定義動畫*/
@keyframes 動畫名稱{
/* 樣式規(guī)則*/
}
/* 將它應(yīng)用于元素 */
.element {
animation-name: 動畫名稱（在@keyframes中已經(jīng)聲明好的）;
/* 或使用動畫簡寫屬性*/
animation: 動畫名稱 1s ...
}transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進行旋轉(zhuǎn)、縮放、移動或傾斜。
語法：transform: none|transform-functions;
none 定義不進行轉(zhuǎn)換。
matrix(n,n,n,n,n,n) 定義 2D 轉(zhuǎn)換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉(zhuǎn)換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉(zhuǎn)換。
translate3d(x,y,z) 定義 3D 轉(zhuǎn)換。
translateX(x) 定義轉(zhuǎn)換，只是用 X 軸的值。
translateY(y) 定義轉(zhuǎn)換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。
scale(x,y) 定義 2D 縮放轉(zhuǎn)換。
scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換。
scaleX(x) 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。
scaleY(y) 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。
scaleZ(z) 通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換。
rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。
perspective(n) 為 3D 轉(zhuǎn)換元素定義透視視圖。
以上是“如何利用CSS3創(chuàng)建實用的加載動畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前題目：如何利用CSS3創(chuàng)建實用的加載動畫效果
新聞來源：http://weahome.cn/article/pcgoop.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
