CSS之动画 | 木兮xg

前言：

动画：

什么是动画：

动画的基础操作：

动画的常用属性：

动画使用方法：

代码演示：

过渡(transition)：

可以参考这篇文章：点此跳转

什么是过渡：

常用属性：

transition-duration用来设置过渡需要花费的时间（单位为秒或者毫秒）用来设置过渡需要花费的时间（单位为秒或者毫秒）transition-timing-function属性用来设置过渡动画的类型

代码演示(举例)：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      img{
         width: 100px;
         transition-property:width;
      }
         /*点击放大*/
      img:hover{
         width: 500px;
      }
   </style>
</head>
<body>
   <div>
      <img src="../img/4.jpg" alt="">
   </div>
</body>
</html>

CSS之动画-LMLPHP

变形（仅仅讲三维空间的）：

可以参考此篇文章：点此跳转

什么是变形：

常用属性：

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<style>
   div{
      perspective:800px;
   }
   .box1{
      width: 500px;
      height: 500px;
      margin: 0px auto;
      margin-top: 100px;
      background-color: lightblue;
   }
   .box2{
      width: 100px;
      height: 100px;
      margin: 0px auto;
      background-color: aquamarine;
   }
   .box2:hover{
      transform: translatez(200px);
   }
</style>
<body>
   <div class="box1">
      <div class="box2"></div>
   </div>
</body>
</html>

CSS之动画-LMLPHP

旋转（仅仅讲二维空间的）：

可以参考此篇文章：点击查阅

什么是旋转：

常用属性：

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<style>
   .box1{
      width: 200px;
      height: 200px;
      margin: 0px auto;
      margin-top: 100px;
      background-color: lightblue;
   }
   .box2{
      width: 200px;
      height: 200px;
      margin: 0px auto;
      
      background-color: aquamarine;
   }
   .box2:hover{
      transform: rotate(45deg);
   }
</style>
<body>
   <div class="box1">
      <div class="box2"></div>
   </div>
</body>
</html>

CSS之动画-LMLPHP

放缩：

可以参考此篇文章：点击查阅

什么是放缩：

常用属性：

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<style>
   .box1{
      width: 200px;
      height: 200px;
      margin: 0px auto;
      margin-top: 100px;
      background-color: lightblue;
   }
   .box1:hover{
      transform: scale(2,3);
   }
</style>
<body>
   <div class="box1">
      
   </div>
</body>
</html>

CSS之动画-LMLPHP