前端每日實戰(zhàn)：45# 視頻演示如何用純 CSS 創(chuàng)作一個菱形 loader 動畫

MarvinZhang 發(fā)布于2019-08-29 15:38 / 2496人閱讀

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

效果預(yù)覽

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

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

可交互視頻教程

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

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

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

源代碼下載

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

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

代碼解讀

定義 dom，一個容器中包含 9 個子元素：

居中顯示：

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

定義容器和子元素尺寸，是一個大正方形里包含 9 個小正方形：

.loader {
    width: 10em;
    height: 10em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5em;
}

把圖案調(diào)整為大菱形中包含 9 個小菱形：

.loader {
    transform: rotate(45deg);
}

以豎向的小菱形為單位，為小菱形塊上色：

.loader span {
    background-color: var(--c);
}

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

.loader span:nth-child(4),
.loader span:nth-child(8) {
    --c: gold;
}

.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
    --c: limegreen;
}

.loader span:nth-child(2),
.loader span:nth-child(6) {
    --c: dodgerblue;
}

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

定義動畫效果：

.loader span {
    animation: blinking 2s linear infinite;
    animation-delay: var(--d);
    transform: scale(0);
}

@keyframes blinking {
    0%, 100% {
        transform: scale(0);
    }

    40%, 80% {
        transform: scale(1);
    }
}

最后，為小菱形設(shè)置時延，增強動感：

.loader span:nth-child(7) {
    --d: 0s;
}

.loader span:nth-child(4),
.loader span:nth-child(8) {
    --d: 0.2s;
}

.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
    --d: 0.4s;
}

.loader span:nth-child(2),
.loader span:nth-child(6) {
    --d: 0.6s;
}

.loader span:nth-child(3) {
    --d: 0.8s;
}

大功告成！

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113448.html

發(fā)表評論

登陸后可評論

0條評論

MarvinZhang

男|高級講師

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

TA的文章

【小白】線性表的順序存儲結(jié)構(gòu)的實現(xiàn)（C語言）

閱讀 784·2021-09-26 09:55
廣州主機號碼什么開頭-主機號是什么？

閱讀 2072·2021-09-22 15:44
fetch 如何請求數(shù)據(jù)

閱讀 1480·2019-08-30 15:54
前端每日實戰(zhàn)：72# 視頻演示如何用純 CSS 創(chuàng)作氣泡填色的按鈕特效

閱讀 1337·2019-08-30 15:54
用小程序做一個類似于蘋果AssistiveTouch功能

閱讀 2684·2019-08-29 16:57
移動端的vw px rem之間換算

閱讀 527·2019-08-29 16:26
前端每日實戰(zhàn)：45# 視頻演示如何用純 CSS 創(chuàng)作一個菱形 loader 動畫

閱讀 2497·2019-08-29 15:38
ES6新特性總結(jié) 一

閱讀 2134·2019-08-26 11:48

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

前端每日實戰(zhàn)：45# 視頻演示如何用純 CSS 創(chuàng)作一個菱形 loader 動畫

相關(guān)文章