HTML與CSS中的動(dòng)畫模塊是什么

這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹HTML與CSS中的動(dòng)畫模塊是什么，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

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

一. 動(dòng)畫模塊

1.過(guò)渡和動(dòng)畫之間的異同

1.1不同點(diǎn)

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

1.2相同點(diǎn)

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

2 動(dòng)畫三要素

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

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

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

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

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

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

四. 動(dòng)畫模塊-連寫

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

2.動(dòng)畫模塊連寫格式的簡(jiǎn)寫
animation:動(dòng)畫名稱動(dòng)畫時(shí)長(zhǎng);

五. 云層效果

<html lang="en"> <head>     
<meta charset="UTF-8">     <title>104-動(dòng)畫模塊-云層效果</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; //讓屏幕下方的滾動(dòng)條隱藏掉         }      
    ul li{             list-style: none;             width: 400%;  
    //設(shè)置li的寬度為屏幕的四倍,移動(dòng)最多的為屏幕寬度的三倍,為保證屏幕內(nèi)一直有云朵,故多設(shè)置一個(gè)屏幕的寬度的云朵
        height: 100%;             position: absolute; 
        // 設(shè)置子絕父相后,三個(gè)li會(huì)重疊到一起             
        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%;  
         //如果先往右移動(dòng),又出現(xiàn)屏幕上有一節(jié)沒(méi)云朵的情況,故先往左移動(dòng);             
         }         }         
         @keyframes two {            
          from{                 margin-left: 0;             }             
          to{                 margin-left: -200%;
          //由于動(dòng)畫的時(shí)間都一樣,但是運(yùn)動(dòng)的距離不一樣,又由于都是線性速度,所以就會(huì)出現(xiàn)有點(diǎn)運(yùn)動(dòng)快,有的運(yùn)動(dòng)慢!
                       }         }         
         @keyframes three {             from{                 margin-left: 0;             }             
         to{                 margin-left: -300%;             }         }     
         </style> </head> <body> <ul>     <li></li>     <li></li>     <li></li> </ul> </body> </html>

六. 無(wú)限滾動(dòng)

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

關(guān)于HTML與CSS中的動(dòng)畫模塊是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

新聞名稱：HTML與CSS中的動(dòng)畫模塊是什么
URL網(wǎng)址：http://aaarwkj.com/article8/ihhhip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、定制網(wǎng)站、域名注冊(cè)、網(wǎng)站營(yíng)銷、面包屑導(dǎo)航、App開發(fā)

聲明：本網(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í)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

HTML與CSS中的動(dòng)畫模塊是什么