搞不了視頻太難了。。。。
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>
