css3的動畫詳解 html直接能夠運行

時間 2019-11-17

標籤 css3 css 動畫詳解 html 直接能夠運行欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
       /*經過2D轉換咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。下面是2D轉換的方法
       * transform爲動畫屬性能夠爲2D或3D動畫
       translate()元素從當前位置移動根據X，Y軸移動
       rotate() 旋轉角度單位度 deg
       scale()縮放轉換
       skew()元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：
       matrix()把全部的屬性放在一塊兒的簡寫包含數學函數，容許您：旋轉、縮放、移動以及傾斜元素。
       * */
       .dh_2d{
           width: 80px;
           height: 50px;
           margin: 200px auto;
           background: #009688;
           /*transform: translate(100px,50px);*/
           /*transform: rotate(60deg);*/
           /*transform: scale(1.5,3);*/
           /*transform: skew();*/
           /*transform: skew(50deg ,60deg);*/
           transform: matrix(0.866,0.5,-0.5,0.866,0,0);
       }

       /*3D轉換*/
       /*rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉
          rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
          * */
       .dh_3d{
           width: 100px;
           height: 100px;
           border-top: 2px solid red;
           border-right:2px solid #006DCC ;
           border-bottom:2px solid #002A80 ;
           border-left:2px solid #000000 ;
           margin: 200px auto;
           transform: rotateX(160deg);
       }
       /*過渡效果*/
       /*
       CSS3 過渡是元素從一種樣式逐漸改變爲另外一種的效果。
       要實現這一點，必須規定兩項內容：
                規定您但願把效果添加到哪一個 CSS 屬性上
       規定效果的時長
       transition
       * */
       .dh_gd{
           width: 100px;
           height: 100px;
           border-top: 2px solid red;
           border-right:2px solid #006DCC ;
           border-bottom:2px solid #002A80 ;
           border-left:2px solid #000000 ;
           margin: 200px auto;
           /*transition: width 2s, height 5s;*/
           transition: transform 30s;
       }
       .dh_gd:hover{
           /*width: 200px;
           height: 200px;*/
           transform: scale(2,2);
       }
       /*自定義動畫
       @keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。
       animation
       * */
       .dh_animation{
           width: 50px;
           height: 50px;
           background: #00FFFF;
           animation:mydh 5s infinite ;
       }
       @keyframes mydh{
           0% {width: 50px;height: 50px;background: #00FFFF;}
           25% {width: 10px;height: 10px; background: #0088CC;}
           50% {width: 100px;height: 100px;background: red;}
           75% {width: 80px;height: 80px;background: #1D7DB1;}
           100%{width: 50px;height: 50px;background: #00FFFF;}
       }


       </style>
   </head>
   <body>
       <div class="dh_2d"></div>
       <div class="dh_3d"></div>
       
       <div class="dh_gd"></div>
       
       <div class="dh_animation"></div>
   </body>
</html>css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。