免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

CSS怎么實現(xiàn)彈簧效果的旋轉(zhuǎn)加載動畫

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

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

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

CSS怎么實現(xiàn)彈簧效果的旋轉(zhuǎn)加載動畫

具體代碼：

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

CSS Code復制內(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怎么實現(xiàn)彈簧效果的旋轉(zhuǎn)加載動畫”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對CSS怎么實現(xiàn)彈簧效果的旋轉(zhuǎn)加載動畫這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

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

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

廣告

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

營銷型網(wǎng)站建設(shè)