前端每日實(shí)戰(zhàn)：53# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)文本淡入淡出的 loader 動(dòng)畫

Jackwoo 發(fā)布于2019-08-30 15:53 / 3348人閱讀

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

效果預(yù)覽

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

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

可交互視頻

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

請(qǐng)用 chrome, safari, edge 打開觀看。

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

源代碼下載

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

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

代碼解讀

定義 dom，容器是包含 7 個(gè)子元素，每個(gè)子元素中有一個(gè)字母：

居中顯示：

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

設(shè)置容器尺寸：

.loader {
    width: 40em;
    height: 3em;
}

設(shè)置文字樣式：

.loader {
    color: dodgerblue;
    font-size: 1.5em;
    text-transform: uppercase;
    font-family: sans-serif;
}

給文字增加漸隱漸顯動(dòng)畫：

.loader span {
    animation: moving 2s linear infinite;
}

@keyframes moving {
    0% {
        filter: opacity(0);
    }

    33% {
        filter: opacity(1);
    }

    66% {
        filter: opacity(1);
    }

    100% {
        filter: opacity(0);
    }
}

設(shè)置動(dòng)畫延時(shí)，增強(qiáng)動(dòng)畫效果：

.loader span {
    animation-delay: calc((var(--n) - 10) * 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;
}

設(shè)置文字旋轉(zhuǎn)效果：

.loader {
    position: relative;
}

.loader span {
    position: absolute;
    height: 3em;
}

@keyframes moving {
    0% {
        filter: opacity(0);
        transform: rotate(-180deg);
    }

    33% {
        filter: opacity(1);
        transform: rotate(0deg);
    }

    66% {
        filter: opacity(1);
        transform: rotate(0deg);
    }

    100% {
        filter: opacity(0);
        transform: rotate(180deg);
    }
}

增加文字移動(dòng)的效果：

@keyframes moving {
    0% {
        filter: opacity(0);
        transform: rotate(-180deg);
        left: 100%;
    }

    33% {
        filter: opacity(1);
        transform: rotate(0deg);
        left: 60%;
    }

    66% {
        filter: opacity(1);
        transform: rotate(0deg);
        left: 40%;
    }

    100% {
        filter: opacity(0);
        transform: rotate(180deg);
        left: 0;
    }
}

增加文字變色效果：

.loader {
    animation: change-color 10s linear infinite;
}

@keyframes change-color {
    0% {
        color: dodgerblue;
    }

    20% {
        color: hotpink;
    }

    40% {
        color: gold;
    }

    60% {
        color: mediumpurple;
    }

    80% {
        color: lightgreen;
    }

    100% {
        color: dodgerblue;
    }
}

最后，把可能出現(xiàn)在頁面外的部分隱藏掉：

body {
    overflow: hidden;
}

大功告成！

GPU云服務(wù)器云服務(wù)器如何用css 淡出淡入淡入淡出淡入淡出顯示

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116734.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Jackwoo

男|高級(jí)講師

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

TA的文章

關(guān)于C++基礎(chǔ)的一些“碎碎念”

閱讀 1848·2021-09-29 09:35
云服務(wù)器和云虛擬主機(jī)有什么區(qū)別-云主機(jī)、云服務(wù)器、虛擬主機(jī)有什么區(qū)別呢？

閱讀 2710·2021-09-22 15:25
PIGYun：“喜迎金秋" 香港、韓國BGP混合CN2大帶寬僅14元起

閱讀 1972·2021-08-23 09:43
前端進(jìn)階（12） - css 的弱化與 js 的強(qiáng)化

閱讀 2049·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：53# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)文本淡入淡出的 loader 動(dòng)畫

閱讀 3349·2019-08-30 15:53
哪些你知道或不知道的css，在這里或許都齊全

閱讀 2387·2019-08-30 13:50
移動(dòng)端鍵盤和光標(biāo)的兼容那點(diǎn)事

閱讀 2398·2019-08-30 11:24
前端框架這么多，該如何抉擇？

閱讀 2269·2019-08-29 15:37

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

資訊專欄INFORMATION COLUMN

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

前端每日實(shí)戰(zhàn)：53# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)文本淡入淡出的 loader 動(dòng)畫

相關(guān)文章