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