前端每日實戰(zhàn)：84# 視頻演示如何用純 CSS 創(chuàng)作一個極品飛車 loader

JinB 發(fā)布于2019-08-30 15:54 / 2833人閱讀

摘要：效果預(yù)覽按下右側(cè)的點擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

效果預(yù)覽

按下右側(cè)的“點擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點擊鏈接可以全屏預(yù)覽。

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

可交互視頻

此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

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

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

源代碼下載

每日前端實戰(zhàn)系列的全部源代碼請從 github 下載：

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

代碼解讀

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

居中顯示：

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);
    }
}

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

.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);
    }
}

大功告成！

云服務(wù)器 GPU云服務(wù)器如何用css 如何用云服務(wù)器做一個個人網(wǎng)站如何用vue開發(fā)實時音視頻 css-loader

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116944.html

發(fā)表評論

登陸后可評論

0條評論

JinB

男|高級講師

我要關(guān)注我要私信

TA的文章

2021-09-08

閱讀 2686·2021-09-09 09:33
前端每日實戰(zhàn)：84# 視頻演示如何用純 CSS 創(chuàng)作一個極品飛車 loader

閱讀 2834·2019-08-30 15:54
css基礎(chǔ)

閱讀 2890·2019-08-30 14:21
[無心插柳]簡單實現(xiàn)常用的表單校驗函數(shù)

閱讀 2390·2019-08-29 17:15
CSS自定義屬性 —— 別說你懂CSS相對單位

閱讀 3608·2019-08-29 16:13
【前端Talkking】CSS系列-紅月亮、藍(lán)月亮、X月亮，還是漸變月亮好

閱讀 2788·2019-08-29 14:21
js數(shù)組筆記

閱讀 3455·2019-08-26 13:25
js異步編程-async，await以及不可以取代的Promise

閱讀 2056·2019-08-26 12:14

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端每日實戰(zhàn)：84# 視頻演示如何用純 CSS 創(chuàng)作一個極品飛車 loader

相關(guān)文章