亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇

          系統城裝機大師 - 唯一官網:www.snowmanhill.com!

          當前位置:首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

          HTML連載72-動畫效果及其他屬性

          時間:2020-03-04來源:電腦系統城作者:電腦系統城

          一、動畫效果

          1.過渡與動畫相類似,都需要三要素,那么他們的區別在哪里呢?

          ?答:過渡必須是人為的觸發才會執行動畫,動畫不需要人為的觸發就可以自動執行?動畫。

          2.?相同點:

          (1)過度和動畫都是用來給元素添加動畫的;(2)過渡和動畫都是系統?新增的一些屬性;(3)過渡和動畫都需要滿足三要素才會有動畫效果

          3.動畫的三要素

          (1)告訴系統需要執行哪個動畫?;

           
          
          animation-name:動畫名稱;

           

           

          (2)告訴系統我們需要自己創建一個自定義名稱的動畫

           

          復制代碼
          @keyframs  動畫名稱{
          
              from{
          
              }
          
              to{
          
              }
          
          }
          
           
          復制代碼

           

          (3)動畫持續的時長

           
          
          animation:時間;/*這里的時間可以使用秒做單位*/

          復制代碼
           
          
              <style>
          
                  *{
          
                      padding:0;
          
                      margin:0;
          
                  }
          
                  div{
          
                      width:100px;
          
                      height: 50px;
          
                      background-color: red;
          
                     
          
                      animation-name:lnj;
          
                      animation-duration: 1s;
          
                  }
          
                  @keyframes lnj {
          
                      from{
          
                          margin-left:0;
          
                      }
          
                      to{
          
                          margin-left:500px;
          
                      }
          
                  }
          
          .........省略代碼........
          
          <div></div>
          復制代碼

          二、動畫模塊其他屬性

           

          復制代碼
              <style>
          
                  *{
          
                      padding:0;
          
                      margin:0;
          
                  }
          
                  div{
          
                      width: 100px;
          
                      height: 50px;
          
                      background-color: red;
          
                      animation-name:sport;
          
                      animation-duration: 1s;
          
                      animation-delay:1s;/*動畫執行前的延遲時間*/
          
                      animation-timing-function:linear;/*動畫持續的速度函數類型*/
          
                      animation-iteration-count:3;/*動畫執行的次數*/
          
                      animation-direction:alternate;/*動畫執行循環往復,循環往復一次是算兩次動畫效果的,如果使用normal,那么就是重復動畫而已,默認是此值*/
          
                      animtion-play-state:running;/*默認是running,也就是執行動畫*/
          
                  }
          
                  @keyframes sport {
          
                      from{
          
                          margin-left:0px;
          
                      }
          
                      to{
          
                          margin-left:500px;
          
                      }
          
                  }
          
                  div:hover{
          
                      /*告訴系統當前動畫是否需要暫停*/
          
                      animation-play-state:paused;
          
                  }
          
          .........省略代碼.......
          
          <div></div>
          
           
          復制代碼

          三、動畫效果其他屬性下

          通過我們的觀察,動畫是有一定的狀態的

          (1)      ?等待狀態;(2)?執行狀態;(3)結束狀態

           
          
          animation-fill-mode:none;

           

           

          屬性值有四種

          n?one:不做任何的改變;

          forwards:讓元素結束狀態保持動畫的最后一幀的樣式

          backwards:讓元素等待狀態的時候顯示動畫的第一幀的樣式

          both:?兩個屬性值的效果都顯示。

           

          復制代碼
              <style>
          
                  *{
          
                      padding:0;
          
                      margin:0;
          
                  }
          
                  .box1{
          
                      width: 100px;
          
                      height: 50px;
          
                      background-color: red;
          
                      animation-name:sport;
          
                      animation-duration:2s;
          
                  }
          
                  @keyframes sport {/*這里的百分比代表占用的時間*/
          
                      0%{
          
                          margin-left:0px;
          
                          margin-top:0px;
          
                      }
          
                      10%{
          
                          margin-left: 300px;
          
                          margin-top:0px;
          
                      }
          
                      20%{
          
                          margin-left:300px;
          
                          margin-top:300px;
          
                      }
          
                      30%{
          
                          margin-left:0px;
          
                          margin-top:300px;
          
                      }
          
                      100%{
          
                          margin-left:0px;
          
                          margin-top:0px;
          
                      }
          
                  }
          
          ?
          
                  .box2{
          
                      width: 100px;
          
                      height: 50px;
          
                      background-color: red;
          
                      margin:100px auto;
          
                      animation-name:sport2;
          
                      animation-duration:2s;
          
                      animation-fill-mode:backwards;
          
                      animation-delay:2s;
          
                  }
          
                  @keyframes sport2 {
          
                      0%{
          
                          tranform:rotate(10deg);
          
                      }
          
                      25%{
          
                          transform:rotate(45deg);
          
                      }
          
                      50%{
          
                          transform:rotate(79deg);
          
                      }
          
                      100%{
          
                          transform:rotate(160deg);
          
                      }
          
                  }
          
          </style>
          
          </head>
          
          <body>
          
          <div class="box1"></div>
          
          <div class="box2"></div>
          復制代碼

          分享到:

          相關信息

          • HTML5之audio屬性

            audio主要支持的音頻格式:mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!-- 方法一 --> <a...

            2020-03-04

          • 徹底搞懂flex彈性盒模型布局

            為什么要用flex 基于css3簡單方便,更優雅的實現,瀏覽器兼容性好,傳統的css實現一個div居中布局要寫一堆代碼,而現在幾行代碼就搞定了,沒有理由不用flex。...

            2020-02-28

          系統教程欄目

          欄目熱門教程

          人氣教程排行

          站長推薦

          熱門系統下載

          亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇