css實例2

--dirname 是css中的聲明變量  var(--n)是一個函數指的是讀取變量
讓其動畫的時間不一致則可以達到圖片的效果.這是仿一個大佬的小案例
//html代碼
  <div class="box">
        <span></span>
        <span></span>
        <span></span>
    </div>
//css代碼
html,body{
    /* 因爲默認是沒有高度的 */
    height: 100%;
    /* 使其box 居中顯示 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}



.box{
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box span{
    /* 全部 居中顯示 作爲一個行內塊元素 */
    position: absolute;
    /* 定義一個 css變量 --diameter 方便計算 
     var() css函數 讀取csss變量*/
    --diameter: calc(40% + (var(--n)-1) *30%);
    width: var(--diameter);
    height: var(--diameter);
    box-sizing: border-box;
    border:10px solid dimgray;
    border-radius: 2px;
    animation: one  linear infinite;

}

.box span:nth-child(1){
    /* 定義一個 變量 --n */
    --n:1;
    /* 動畫的時間 */
    animation-duration: 1s;
}
.box span:nth-child(2){
    /* 定義一個 變量 --n */
    --n:2;
    /* 動畫的時間 */
    animation-duration: 2s;
}
.box span:nth-child(3){
    /* 定義一個 變量 --n */
    --n:3;
    /* 動畫的時間 */
    animation-duration: 4s;
}


.box span::before,.box span::after{
    content: "";
    background-color: gold;
    width: 10px;
    height: 50%;
    position: absolute;
}
.box span::before {
	top: -10px;
	left: -10px;
}

.box span::after {
	bottom: -10px;
	right: -10px;
}

@keyframes one{
    to{
        transform: rotateY(360deg)
    }
}