搞不了视频太难了。。。。

Animations是css3的一个模块，应用keyframes定义如何随着工夫的挪动扭转CSS的属性值，能够通过指定它们的持续时间，反复次数，如何反复来管制关键帧的行为。Animations由两局部组成：css动画的配置，以及一系列的keyframes（用来形容动画的开始、过程、完结状态）

transform 属性向元素利用从2D或3D转换。该属性容许咱们对元素进行旋转、缩放、挪动或者歪斜

<!-- * @Author: [you name] * @Date: 2021-08-12 17:00:29 * @LastEditors: [you name] * @LastEditTime: 2021-09-16 22:27:09 * @Description: 呼吸灯的实现  用transform和animation实现--><!DOCTYPE html><html lang="en"><head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>          .bg {               width: 500px;               height: 500px;               margin: 50px auto;               background-color: rgb(217, 255, 2);               position: relative;          }          .bg .small_cirlce {               width: 300px;               height: 300px;               border: 20px solid white;               /* 程度居中 */               top: 50%;               left: 50%;               margin-top: -150px;               margin-left: -150px;               position: absolute;               /* 变成边框盒子  它的宽高是整个盒子的宽高 */               /* 因为边框占据了40px 所以用内容盒子的话会使其不能居中  所以要转换成边框盒子 */               box-sizing: border-box;               border-radius: 50%;      /* 设置动画 自定义动画名称circle    ease-in-out：动画以低速开始和完结   infinite示意有限次执行*/               animation: circle 5s ease-in-out infinite;          }          .bg .big_circle {               width: 400px;               height: 400px;               border: 10px solid white;               /* 设置程度居中 */               top: 50%;               left: 50%;               margin-top: -200px;               margin-left: -200px;               position: absolute;               /* 变成边框盒子  它的宽高是整个盒子的宽高 */                  /* 因为边框占据了20px 所以用内容盒子的话会使其不能居中  所以要转换成边框盒子 */               box-sizing: border-box;               border-radius: 50%;                /* 设置动画 自定义动画名称circle    ease-in-out    动画以低速开始和完结   infinite：有限次执行*/               animation: circle 5s ease-in-out infinite;          }          /* 设置动画 */          @keyframes circle {               /* transform 属性向元素利用从2D或3D转换。该属性容许咱们对元素进行旋转、缩放、挪动或者歪斜 */               0% {                    /* 扭转大小  缩放 scale */                    transform: scale(0.6);                    border-color: rgb(255, 3, 3);               }               25% {                    /* 扭转大小 */                    transform: scale(0.7);                    border-color: rgb(243, 5, 183);               }               50% {                    /* 扭转大小 */                    transform: scale(0.8);                    border-color: rgb(5, 101, 245);               }              75% {                    /* 扭转大小 */                    transform: scale(0.9);                    border-color: rgb(77, 248, 10);               }               100% {                    /* 扭转大小 */                    transform: scale(1);                    border-color: rgb(2, 236, 244);               }          }     </style></head><body>     <div class="bg">          <div class="small_cirlce"></div>          <div class="big_circle"></div>     </div></body></html>