先看看效果，像是彈簧在伸縮：

具體代碼：

此處用到CSS3的transform屬性。
     CSS3的變形（transform）屬性讓元素在一個坐標系統(tǒng)中變形。這個屬性包含一系列變形函數，可以移動、旋轉和縮放元素。
      transform屬性可用于內聯元素和塊元素。其默認值為none，表示不元素不進行變形。transform另一個屬性值是一系列的<transform-function>。<transform-function>表示一個或多個變形函數，以空格分開；我們可以同時對一個元素進行變形的多種屬性操作，如rotate、scale、translate等。以往我們疊加效果都是用逗號(“，”)隔開，但在transform中使用多個transform-function時卻需要有空格隔開。
  ● 2D transform常用的transform-function的功能:
      transform屬性3D變形（3D transform）模塊的一部分，也就是說所有的2D變形函數也包含于3D變形規(guī)范中。如此一來，CSS3變形中的函數根據不同的規(guī)范略有不同，下面列出的是變形中的2D和3D常用變形函數的功能，簡單說明如下：
      translate()：用來移動元素，可以根據X軸和Ｙ軸坐標重新定位元素位置。在此基礎上有兩個擴展函數：translateX()和translateY()。
     scale()：用來縮小或放大元素，可以使用元素尺寸發(fā)生變化。在此基礎上有兩個擴展函數：scaleX()和scaleY()。            rotate()：用來旋轉元素。
     skew()：用來讓元素傾斜。在此基礎上有兩個擴展函數：skewX()和skewY()。
     matrix()：定義矩陣變形，基于X軸和Y軸坐標重新定位元素位置。
 ● 3D transform常用的transform-function的功能:
      translate3d()：移元素元素，用來指定一個3D變形移動位移量。
      translate()：指定3Ｄ位移在Ｚ軸的位移量。
      scale3d()：用來縮放一個元素。
      scaleZ():指定Z軸的縮放向量。
      rotate3d()：指定元素具有一個三維旋轉的角度。
      rotateX()、rotateY()和rotateZ()：讓元素具有一個旋轉角度。
      perspective()：指定一個透視投影矩陣。
      matrix3d()：定義矩陣變形。
  ● transform-origin屬性用來設置變換的原點。示例中代表旋轉中心。      

以上就是本文的全部內容，希望對大家學習CSS加載動畫教程有所幫助。

最新評論