前端每日實戰：10# 視頻演示如何用純 CSS 創做一個同心圓弧旋轉 loader 特效

時間 2019-11-06

標籤前端每日實戰視頻演示如何 css 一個同心圓弧旋轉 loader 特效欄目 CSS 简体版

原文原文鏈接

效果預覽

按下右側的「點擊預覽」按鈕在當前頁面預覽，點擊連接全屏預覽。css

https://codepen.io/zhang-ou/pen/OZmXQXhtml

可交互視頻教程

此視頻是能夠交互的，你能夠隨時暫停視頻，編輯視頻中的代碼。git

請用 chrome, safari, edge 打開觀看。github

https://scrimba.com/c/cPdWVuDchrome

源代碼下載

請從 github 下載。dom

https://github.com/comehope/front-end-daily-challenges/tree/master/010-concentric-arc-rotating-loader-animationflex

代碼解讀

定義 dom，只包含一個元素：動畫

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

居中顯示：spa

html,
body,
.circle {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

一共畫三層圓弧，先畫最外一層的樣式：code

.circle {
    width: 10em;
    height: 10em;
    border-width: 0.4em;
    border-style: solid;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: red;
    border-bottom-color: blue;
}

再用僞元素畫中間一層的樣式：

.circle {
    position: relative;
}

.circle::before {
    content: '';
    position: absolute;
    width: 75%;
    height: 75%;
    border-width: 0.4em;
    border-style: solid;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: orange;
    border-bottom-color: cyan;
}

再用僞元素畫最內一層的樣式：

.circle::before {
    content: '';
    position: absolute;
    width: 75%;
    height: 75%;
    border-width: 0.4em;
    border-style: solid;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: yellow;
    border-bottom-color: limegreen;
}

定義動畫效果：

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

    to {
        transform: rotate(1440deg);
    }
}

最後，應用動畫效果到每層：

.circle {
    animation: animate 4s ease-in-out infinite alternate;
}

.circle::before {
    animation: animate 8s ease-in-out infinite alternate;
}

.circle::after {
    animation: animate 16s ease-in-out infinite alternate;
}

大功告成！