練習地址是GitHub上的，是地址 中的002
思路肯定就是查看源碼然後自己去編寫。。
第一步：你得先畫出來三個長方形
第二步：讓這三個長方形重疊
第三步：給三個長方形加載動畫
第四部：就自己想幹啥幹啥吧；
哦，用到的CSS val 和 calc 。 val感覺這個講的很詳細，calc 就相當於一個計算函數，只不過在計算符號的前邊和後邊要有一個空格，不然它計算不了。。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>親愛的長方形旋轉</title>
<link rel="stylesheet" href="rectangular.css">
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
html,body{
/* flex模型，中午剛看完，就不叨叨了 */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.box{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items:center;
position: relative;
}
.box span:nth-child(1){
--n:0;
animation-duration: var( --time );
}
.box span:nth-child(2){
--n:1;
animation-duration: var( --time );
}
.box span:nth-child(3){
--n:2;
animation-duration: var( --time );
}
.box span::before,.box span::after{
content: "";
width: 10px;
height: 50%;
background: gold;
position: absolute;
}
.box span::after{
bottom: -10px;
right: -10px;
}
.box span::before{
top: -10px;
left: -10px;
}
.box span{
/* css自定義變量，可以省略一些重複的代碼。
這裏 --demeter 是寬度和長度
--time 是表示動畫的時間。。
*/
--demeter:calc(40% + var(--n) * 30%);
--time: calc(var(--n) * 1s + 2s );
width:var( --demeter);
height: var(--demeter);
box-sizing: border-box;
border: 10px solid red;
border-radius: 2px;
position: absolute;
animation: rotating linear infinite;
}
@keyframes rotating {
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}