css3常用动画示例

妖狐艹你老母 2022-04-11 12:49 261阅读 0赞

> css3作为css的最新标准，支持了很多的新特性和动画样式，下面，我将从示例来介绍css3动画的独到之处。

*  ### 基础知识准备 ###

**transition**：动画的名称类型  动画的执行时间  动画的延迟  动画的执行方式；//简单的动画

**animation**: 已定义动画的名字 执行时间  动画的延迟  动画的执行方式  循环方式;  //自定义动画

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#ffffff;"><strong>动画的执行方式</strong></span></p> </td> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#ffffff;"><strong>属性值的变化速度</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">linear</span></p> </td> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">以同样的速度播放</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">ease-in</span></p> </td> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">开始速度慢，然后随曲线值加快</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">ease-out</span></p> </td> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">开始速度块，然后随曲线值放慢</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">ease</span></p> </td> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">开始速度慢，然后随曲线值加快，然后在随曲线值放慢</span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">ease-in-out</span></p> </td> 
   <td style="border-color:#ffffff;vertical-align:top;width:321pt;"> <p style="margin-left:0in;"><span style="color:#000000;">开始速度慢，然后随曲线值加快，然后在随曲线值放慢</span></p> </td> 
  </tr> 
 </tbody> 
</table>

**transform**：rotadeX(60deg) rotadeY(60deg) rotade(60deg)  ；   //以屏幕宽高为x，y轴，垂直于xy的轴为z轴，分别旋转60deg。

**transform：**translateX（200px）；与上类似。

**transform-orign: ** 确定旋转/移动的中心点

*  ### 操作示例与代码展示 ###

*一个简单的反转字体动画代码*

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>反转字体</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    
    <body>
        <div>
            <div class="font">
                <div class="ceng">Hello World</div>
                <div class="font_content">Hello World</div>
            </div>
    
        </div>
    
    </body>
    
    </html>

body,html{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    *{
        margin: 0%;
        padding: 0%;
    }
    .font{
        position: relative;
        width: 500px;
        height: 80px;
        margin: 50px auto;
        font-size: 50px;
        color: rgb(82, 78, 78);
        font-weight: bold;
    }
    .font_content{
        position: absolute;
        left: 0;
        top: 0;
        transition: all .5s ease-in;
    }
    .ceng{
        position: absolute;
        left: 0;
        top: 0;
        color: rgb(143, 238, 245);
        z-index: 1;
        transition: all .4s ease-in;
    }
    .font:hover .ceng{
        transform: rotateX(360deg);
        left: 10px;
        top: -1px;
    
    }
    .font:active .font_content{
        color: royalblue;
        font-size: 20px;
    }
    ::selection{
        color: aqua;
        background-color: rgb(142, 235, 149);
    }.text{
        position: absolute;
        right: 50%;
        top: 20%;
    }

*  ### 关于css3动画一些个人启发和学习的体会。 ###

关于学习css3动画，我觉得最好的方法就是模仿在创造，然后用自己的想法，自己的方法去实现它的特效和功能。因为这个东西的变化太多，路径太多，一个动画往往有好几种方法去解决去实现，我们不能被看到的学到的方法限制住自己开发创造的脚步，多尝试，多练习就能更深刻的理解css3。