雙層戒指光暈線條旋轉效果預載動畫-我是一個金艾吉

雙層戒指光暈線條旋轉效果預載動畫

重點：

animation: animate 3s linear infinite; //建立動態效果
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} //設定關鍵影格與效果

效果演示：

HTML：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>雙層戒指光暈效果預載動畫</title>
    <link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20210801">
    <div class="loader">
        <div class="face face1">
            <div class="circle">

            </div>
        </div>
        <div class="face face2">
            <div class="circle">

            </div>
        </div>
    </div>
</body>

</html>

CSS：

#dailycss_20210801 {
    margin: 0;
    padding: 0;
    background-color: #060606;
}

#dailycss_20210801 .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    background-color: #000;
}

#dailycss_20210801 .loader .face {
    position: absolute;
    border: 2px solid #121212;
}

#dailycss_20210801 .face.face1 {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #090909;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-left: 2px solid #ffff00;
    border-top: 2px solid #ffff00;
    animation: animate 3s linear reverse infinite;
}

#dailycss_20210801 .face.face2 {
    top: 30px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    background: #090909;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-right: 2px solid #03a9f4;
    border-bottom: 2px solid #03a9f4;
    animation: animate 3s linear infinite;
}

#dailycss_20210801 .loader .face .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    /* background-color: #fff; */
    transform-origin: left;
}

#dailycss_20210801 .loader .face1 .circle {
    transform: rotate(-45deg);
}

#dailycss_20210801 .loader .face2 .circle {
    transform: rotate(-45deg);
}

#dailycss_20210801 .loader .face .circle:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    top: -4px;
    right: -6px;
}

#dailycss_20210801 .loader .face1 .circle:before {
    background: #ffff00;
    box-shadow: 0 0 20px #ff0,
        0 0 40px #ff0,
        0 0 60px #ff0,
        0 0 80px #ff0,
        0 0 100px #ff0,
        0 0 0 5px rgba(255, 255, 0, 0.1);
}

#dailycss_20210801 .loader .face2 .circle:before {
    background: #03a9f4;
    box-shadow: 0 0 20px #ff0,
        0 0 40px #03a9f4,
        0 0 60px #03a9f4,
        0 0 80px #03a9f4,
        0 0 100px #03a9f4,
        0 0 0 5px rgba(3, 169, 244, 0.1);
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

來源：