搞不了视频太难了。。。。
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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。