這篇文章主要講解了“CSS怎么實(shí)現(xiàn)彈簧效果的旋轉(zhuǎn)加載動(dòng)畫”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS怎么實(shí)現(xiàn)彈簧效果的旋轉(zhuǎn)加載動(dòng)畫”吧！

10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有臨武免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

具體代碼：

此處用到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í)對(duì)一個(gè)元素進(jìn)行變形的多種屬性操作，如rotate、scale、translate等。以往我們疊加效果都是用逗號(hào)(“，”)隔開，但在transform中使用多個(gè)transform-function時(shí)卻需要有空格隔開。
  ● 2D transform常用的transform-function的功能:
      transform屬性3D變形（3D transform）模塊的一部分，也就是說所有的2D變形函數(shù)也包含于3D變形規(guī)范中。如此一來，CSS3變形中的函數(shù)根據(jù)不同的規(guī)范略有不同，下面列出的是變形中的2D和3D常用變形函數(shù)的功能，簡(jiǎn)單說明如下：
      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)中心。      

CSS Code復(fù)制內(nèi)容到剪貼板

1. #loader2,     

2. #loader2:before,     

3. #loader2:after {     

4.   border-radius: 50%;     

5. }     

6. #loader2:before,     

7. #loader2:after {     

8.    position: absolute;     

9.    content: '';     

10. }     

11. #loader2:before {     

12.   width: 5.2em;     

13.   height: 10.2em;     

14.   background: #ffffff;     

15.   border-radius: 10.2em 0 0 10.2em;     

16.   top: -0.1em;     

17.   left: -0.1em;     

18.   -webkit-transform-origin: 5.2em 5.1em;     

19.   transform-origin: 5.2em 5.1em;     

20.   -webkit-animation: load2 2s infinite ease 1.5s;     

21.   animation: load2 2s infinite ease 1.5s;     

22.  }     

23.  #loader2 {     

24.    font-size: 11px;     

25.    text-indent: -99999em;     

26.    margin: 20px 20px;     

27.    position: relative;     

28.    float: left;     

29.    width: 10em;     

30.    height: 10em;     

31.    box-shadow: inset 0 0 0 1em #ff0f88;     

32.  }     

33.  #loader2:after {     

34.    width: 5.2em;     

35.    height: 10.2em;     

36.    background: #ffffff;     

37.    border-radius: 0 10.2em 10.2em 0;     

38.    top: -0.1em;     

39.    left: 5.1em;     

40.    -webkit-transform-origin: 0px 5.1em;     

41.    transform-origin: 0px 5.1em;     

42.    -webkit-animation: load2 2s infinite ease;     

43.    animation: load2 2s infinite ease;     

44.   }     

45.   @-webkit-keyframes load2 {     

46.      0% {     

47.        -webkit-transform: rotate(0deg);     

48.        transform: rotate(0deg);     

49.      }     

50.      100% {     

51.        -webkit-transform: rotate(360deg);     

52.        transform: rotate(360deg);     

53.      }     

54.  }     

55.  @keyframes load2 {     

56.     0% {     

57.       -webkit-transform: rotate(0deg);     

58.       transform: rotate(0deg);     

59.     }     

60.     100% {     

61.       -webkit-transform: rotate(360deg);     

62.       transform: rotate(360deg);     

63.     }     

64. }    

感謝各位的閱讀，以上就是“CSS怎么實(shí)現(xiàn)彈簧效果的旋轉(zhuǎn)加載動(dòng)畫”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)CSS怎么實(shí)現(xiàn)彈簧效果的旋轉(zhuǎn)加載動(dòng)畫這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站名稱：CSS怎么實(shí)現(xiàn)彈簧效果的旋轉(zhuǎn)加載動(dòng)畫
本文網(wǎng)址：http://chinadenli.net/article38/gdoosp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、虛擬主機(jī)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)