明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML與CSS中的動畫模塊

發(fā)表時間：2023-09-13 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)鞨TML與CSS中的動畫模塊，使用HTML與CSS中的動畫模塊注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。一. 動畫模塊1.過渡和動畫之間的異同1.1不同點(diǎn)過渡必須人為的觸發(fā)才會執(zhí)行動畫 動畫不需要人為的觸發(fā)就可以執(zhí)行動畫1.2相同點(diǎn)過渡和動畫都是用來給元素添加動畫的 過渡和動畫...
這次給大家?guī)鞨TML與CSS中的動畫模塊，使用HTML與CSS中的動畫模塊注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

一. 動畫模塊

1.過渡和動畫之間的異同

1.1不同點(diǎn)

過渡必須人為的觸發(fā)才會執(zhí)行動畫
動畫不需要人為的觸發(fā)就可以執(zhí)行動畫

1.2相同點(diǎn)

過渡和動畫都是用來給元素添加動畫的
過渡和動畫都是系統(tǒng)新增的一些屬性
過渡和動畫都需要滿足三要素才會有動畫效果

2 動畫三要素

2.1告訴系統(tǒng)需要執(zhí)行哪個動畫
2.2告訴系統(tǒng)我們需要自己創(chuàng)建一個名稱叫做lnj的動畫
2.3告訴系統(tǒng)動畫持續(xù)的時長

p{             width: 100px;    
 height: 50px;  
 background-color: red;       
 /*1.告訴系統(tǒng)需要執(zhí)行哪個動畫*/   
 animation-name: lnj;       
 /*3.告訴系統(tǒng)動畫持續(xù)的時長*/             
  animation-duration: 3s;       }        
 /*2.告訴系統(tǒng)我們需要自己創(chuàng)建一個名稱叫做lnj的動畫*/  
 @keyframes lnj {            
  from{                 margin-left: 0;           }             
  to{                 margin-left: 500px; }         
  }

二.動畫模塊 - 其它屬性 (上)

  p {         
  width: 100px;         
  height: 50px;         
  background-color: red;         
  animation-name: sport;         
  animation-duration: 2s;         
  /*告訴系統(tǒng)多少秒之后開始執(zhí)行動畫*/         
  /*animation-delay: 2s;*/         
  /*告訴系統(tǒng)動畫執(zhí)行的速度*/         
  animation-timing-function: linear;         
  /*告訴系統(tǒng)動畫需要執(zhí)行幾次*/         
  animation-iteration-count: 3;  
  //infinite : 無限的         
  /*告訴系統(tǒng)是否需要執(zhí)行往返動畫         
  取值:         normal, 默認(rèn)的取值, 執(zhí)行完一次之后回到起點(diǎn)繼續(xù)執(zhí)行下一次         
  alternate, 往返動畫, 執(zhí)行完一次之后往回執(zhí)行下一次         
  */         animation-direction: alternate;     }     
  @keyframes sport {         
  from{             margin-left: 0;         }         
  to{             margin-left: 500px;         }     }     
  p:hover{         
  /*         告訴系統(tǒng)當(dāng)前動畫是否需要暫停         
  取值:         running: 執(zhí)行動畫,默認(rèn)取值         
  paused: 暫停動畫, 當(dāng)動畫執(zhí)行時,鼠標(biāo)hover到p上方時,動畫停止,鼠標(biāo)移開,則繼續(xù)動畫;         
  */         
  animation-play-state: paused;     }

三.動畫模塊 - 其它屬性 (下)

      .box2{             
      width: 200px;             
      height: 200px;             
      background-color: blue;             
      margin: 100px auto;             
      animation-name: myRotate;             
      animation-duration: 5s;             
      animation-delay: 2s;             
      /*             通過我們的觀察, 動畫是有一定的狀態(tài)的            
       1.等待狀態(tài)             2.執(zhí)行狀態(tài)             3.結(jié)束狀態(tài)             */
      /*             animation-fill-mode作用:             指定動畫等待狀態(tài)和結(jié)束狀態(tài)的樣式 
                  取值:             none: 不做任何改變             
                  forwards: 讓元素結(jié)束狀態(tài)保持動畫最后一幀的樣式; 
                  //向前的            
       backwards: 讓元素等待狀態(tài)的時候顯示動畫第一幀的樣式; 
                   // 向后的             
                   both: 讓元素等待狀態(tài)顯示動畫第一幀的樣式, 讓元素結(jié)束狀態(tài)保持動畫最后一幀的樣式
      */             
      /*animation-fill-mode: backwards;*/             
      /*animation-fill-mode: forwards;*/             
      animation-fill-mode: both;         }         
      @keyframes myRotate {            
       0%{                 transform: rotate(10deg);             }             
       50%{                 transform: rotate(50deg);             }             
       100%{                 transform: rotate(70deg);             }        
        } 
      animation-fill-mode

四. 動畫模塊-連寫

1.動畫模塊連寫格式
animation:動畫名稱 動畫時長 動畫運(yùn)動速度 延遲時間 執(zhí)行次數(shù) 往返動畫;

2.動畫模塊連寫格式的簡寫
animation:動畫名稱 動畫時長;

五. 云層效果

<html lang="en"> <head>     
<meta charset="UTF-8">     <title>104-動畫模塊-云層效果</title>     <style>         
*{             margin: 0;             padding: 0;         }         
ul{             height: 400px;             background-color: skyblue;             
margin-top: 100px;             animation: change 5s linear 0s infinite alternate;            
 position: relative;             overflow: hidden; //讓屏幕下方的滾動條隱藏掉         }      
    ul li{             list-style: none;             width: 400%;  
    //設(shè)置li的寬度為屏幕的四倍,移動最多的為屏幕寬度的三倍,為保證屏幕內(nèi)一直有云朵,故多設(shè)置一個屏幕的寬度的云朵
        height: 100%;             position: absolute; 
        // 設(shè)置子絕父相后,三個li會重疊到一起             
        left: 0;             top: 0;         }         ul li:nth-child(1){             
        background-image: url("images/cloud_one.png");             
        animation: one 30s linear 0s infinite alternate;         }         
        ul li:nth-child(2){             background-image: url("images/cloud_two.png");             
        animation: two 30s linear 0s infinite alternate;         }         
        ul li:nth-child(3){             background-image: url("images/cloud_three.png");             
        animation: three 30s linear 0s infinite alternate;         }         
        @keyframes change {             
        from{                 background-color: skyblue;             }             
        to{                 background-color: black;             }         }         
        @keyframes one {            
         from{                 margin-left: 0;             }             
         to{                 margin-left: -100%;  
         //如果先往右移動,又出現(xiàn)屏幕上有一節(jié)沒云朵的情況,故先往左移動;             
         }         }         
         @keyframes two {            
          from{                 margin-left: 0;             }             
          to{                 margin-left: -200%;
          //由于動畫的時間都一樣,但是運(yùn)動的距離不一樣,又由于都是線性速度,所以就會出現(xiàn)有點(diǎn)運(yùn)動快,有的運(yùn)動慢!
                       }         }         
         @keyframes three {             from{                 margin-left: 0;             }             
         to{                 margin-left: -300%;             }         }     
         </style> </head> <body> <ul>     <li></li>     <li></li>     <li></li> </ul> </body> </html>

六. 無限滾動

<html lang="en"> <head>     <meta charset="UTF-8">     <title>105-動畫模塊-無限滾動</title>     
<style>         *{             margin: 0;             padding: 0;         }        
 p{             width: 600px;             height: 188px;             border: 1px solid #000;           
   margin: 100px auto;             overflow: hidden;         }         ul{             width: 2000px; 
   //這個無限滾動原理就是ul做動畫             
   height: 188px;             background-color: black;  
   //背景顏色黑色,當(dāng)li的透明度為半透明時,li就會有黑色蒙版效果             
   animation: move 10s linear 0s infinite normal;                      
   //name 時間 速度 延時 無限重復(fù) 是否往返(normal代表不往返)
            }         
            ul li{             float: left;             list-style: none;             width: 300px;
                         height: 188px;             background-color: red;             
                         border: 1px solid #000;             box-sizing: border-box;         }
                                  ul:hover{             
                                  /*動畫添加給誰, 就讓誰停止*/ 
                                              animation-play-state: paused;         } 
                                                      ul:hover li{             opacity: 0.5; 
                                                      //當(dāng)li的透明度為0.5時,就會看到父元素的背景顏色(黑色),就會有蒙版效果
                                                               }         
                                                               ul li:hover{             opacity: 1; 
                                                               //透明度為1,不透明,看不到父元素的背景色,故沒有蒙版效果
                                  }         @keyframes move {             
                                  from{                 margin-left: 0;             }             
                                  to{                 margin-left: -1200px;
                                  //只需要移除屏幕4個li的寬度就可.   屏幕上就會顯示第5.6兩個li,這時,原本的動畫就會恢復(fù)的原來的位置接著動畫,實(shí)現(xiàn)了無線滾動效果             
                       }         }     </style> </head> <body> <p>     <ul>         
                       <li>![](images/banner1.png)</li>         <li>![](images/banner2.jpg)</li>        
                       <li>![](images/banner3.jpg)</li>         <li>![](images/banner4.jpg)</li>         
                       //把前兩個li加在后面,起到過度效果;動畫不會顯得太生硬.         
                       <li>![](images/banner1.png)</li>         <li>![](images/banner2.jpg)</li>     
                       </ul> </p> </body> </html>

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

HTML與CSS中2D轉(zhuǎn)換模塊

企業(yè)開發(fā)中使用H5有哪些注意事項(xiàng)

以上就是HTML與CSS中的動畫模塊的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。