共计 1849 个字符，预计需要花费 5 分钟才能阅读完成。
搞不了视频太难了。。。。
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>
正文完