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

具體代碼：

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

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)CSS加載動(dòng)畫教程有所幫助。

最新評論