如何用純 CSS 創做一個極品飛車 loader

時間 2019-11-10

標籤如何 css 一個極品飛車 loader 欄目 CSS 简体版

原文原文鏈接

效果預覽

在線演示
html

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

https://codepen.io/comehope/pen/MBbEMogit

可交互視頻

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

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

https://scrimba.com/p/pEgDAM/cWLg8hVsegmentfault

源代碼下載

本地下載

每日前端實戰系列的所有源代碼請從 github 下載：dom

https://github.com/comehope/front-end-daily-challengesflex

代碼解讀

定義 dom，容器中包含 7 個元素：動畫

&lt;div class="loader"&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
&lt;/div&gt;

居中顯示：url

body{
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(midnightblue, black);
}

畫出 7 個方塊：

.loader {
    width: calc(1em * 7 + 0.15em * 6);
    height: 1.5em;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
}

.loader span {
    width: 1em;
    background-color: deepskyblue;
    border-radius: 0.1em;
}

讓方塊傾斜：

.loader span {
    transform: skewX(-25deg);
}

定義閃爍的動畫效果：

.loader span {
    animation: animate 0.8s infinite alternate;
    filter: opacity(0);
}

@keyframes animate {
    to {
        filter: opacity(1);
    }
}

定義變量，設置動畫延時，使效果看起來像是有一個暗色塊從左到右移動：

.loader span {
    animation-delay: calc((var(--n) - 1) * 0.2s);
}

.loader span:nth-child(1) {
    --n: 1;
}

.loader span:nth-child(2) {
    --n: 2;
}

.loader span:nth-child(3) {
    --n: 3;
}

.loader span:nth-child(4) {
    --n: 4;
}

.loader span:nth-child(5) {
    --n: 5;
}

.loader span:nth-child(6) {
    --n: 6;
}

.loader span:nth-child(7) {
    --n: 7;
}

最後，增長色塊的縮放效果：

.loader span {
    transform: skewX(-25deg) scale(0.1);
}

@keyframes animate {
    to {
        filter: opacity(1);
        transform: skewX(-25deg) scale(1);
    }
}

大功告成！

原文地址：https://segmentfault.com/a/1190000015700996