使用CSS和混色模式實(shí)現(xiàn)loader動(dòng)畫效果的案例-創(chuàng)新互聯(lián)

這篇文章主要介紹使用CSS和混色模式實(shí)現(xiàn)loader動(dòng)畫效果的案例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司主營武漢網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,手機(jī)APP定制開發(fā),武漢h5成都微信小程序搭建,武漢網(wǎng)站營銷推廣歡迎武漢等地區(qū)企業(yè)咨詢效果預(yù)覽

源代碼下載

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

代碼解讀

定義 dom，只有 1 個(gè)元素：

<div class="loader"></div>

居中顯示：

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

定義容器尺寸：

.loader {
    width: 30em;
    height: 3em;
    font-size: 10px;
}

用偽元素畫出2個(gè)圓角矩形，各占容器的一半寬，放置在容器的左右兩端，分別上色：

.loader {
    position: relative;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    width: 50%;
    height: inherit;
    border-radius: 1em;
}

.loader::before {
    left: 0;
    background-color: dodgerblue;
}

.loader::after {
    right: 0;
    background-color: hotpink;
}

為圓角矩形增加 'loading' 文本：

.loader::before,
.loader::after {
    content: 'loading';
    font-size: 2.5em;
    color: white;
    text-align: center;
    line-height: 1em;
}

增加動(dòng)畫效果：

.loader::before,
.loader::after {
    animation: 5s move ease-in-out infinite;
}

@keyframes move {
    50% {
        transform: translateX(100%);
    }
}

為兩個(gè)圓角矩形分別設(shè)置運(yùn)動(dòng)方向變量，使它們相對移動(dòng)：

.loader::before {
    --direction: 1;
}

.loader::after {
    --direction: -1;
}

@keyframes move {
    50% {
        transform: translateX(calc(100% * var(--direction)));
    }
}

最后，設(shè)置混色模式，使兩個(gè)矩形相交的部分不是覆蓋而是使顏色重疊：

.loader::before,
.loader::after {
    mix-blend-mode: multiply;
}

大功告成！

以上是使用CSS和混色模式實(shí)現(xiàn)loader動(dòng)畫效果的案例的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

網(wǎng)站題目：使用CSS和混色模式實(shí)現(xiàn)loader動(dòng)畫效果的案例-創(chuàng)新互聯(lián)
文章鏈接：http://bm7419.com/article22/hdejc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)、軟件開發(fā)、定制開發(fā)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)