前端每日實(shí)戰(zhàn)：106# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)沒(méi)有 DOM 元素的動(dòng)畫(huà)

leoperfect 發(fā)布于2019-08-29 16:24 / 775人閱讀

摘要：源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀沒(méi)有元素，直接寫(xiě)。設(shè)置頁(yè)面空間用偽元素設(shè)置背景圖案平移背景圖案讓背景圖案轉(zhuǎn)動(dòng)起來(lái)平移頁(yè)面縮放頁(yè)面最后，增加變色效果大功告成

效果預(yù)覽

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

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

可交互視頻

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

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

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

源代碼下載

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

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

代碼解讀

沒(méi)有 dom 元素，直接寫(xiě) css。
設(shè)置頁(yè)面空間：

body {
    position: fixed;
    margin: 0;
    width: 100vw;
    height: 100vh;
}

用偽元素設(shè)置背景圖案：

body::before {
    content: "";
    position: fixed;
    width: 200vmax;
    height: 200vmax;
    background-color: steelblue;
    color: turquoise;
    background-image: 
        linear-gradient(
            45deg, 
            currentColor 25%, 
            transparent 25%, transparent 75%, 
            currentColor 75%),
        linear-gradient(
            45deg, 
            currentColor 25%, 
            transparent 25%, transparent 75%, 
            currentColor 75%);
    background-position: 0 0, 5vmax 5vmax;
    background-size: 10vmax 10vmax;

平移背景圖案：

body::before {
    top: 50%;
    left: 50%;
    animation: 
        9s move infinite ease-in-out alternate;
}

@keyframes move {
    from {
        left: -40%;
        top: -40%;
    }

    to {
        left: -60%;
        top: -60%;
    }
}

讓背景圖案轉(zhuǎn)動(dòng)起來(lái)：

body::before {
    animation: 
        9s move infinite ease-in-out alternate,
        9s -1.5s rotating infinite ease-in-out alternate;
}

@keyframes rotating {
    to {
        transform: rotate(180deg);
    }
}

平移頁(yè)面：

body {
    top: 50%;
    left: 50%;
    animation: 
        3s move infinite ease-in-out alternate;
}

縮放頁(yè)面：

body {
    animation: 
        3s move infinite ease-in-out alternate,
        3s zoom infinite ease-in-out alternate;
}

@keyframes zoom {
    to {
        transform: scale(10);
    }
}

最后，增加變色效果：

@keyframes rotating {
    to {
        transform: rotate(180deg);
        filter: hue-rotate(1turn);
    }
}

大功告成！

GPU云服務(wù)器云服務(wù)器如何用css 如何用js給元素定位如何用云服務(wù)器做一個(gè)個(gè)人網(wǎng)站如何用vue開(kāi)發(fā)實(shí)時(shí)音視頻

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

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

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

登陸后可評(píng)論

0條評(píng)論

leoperfect

男|高級(jí)講師

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

TA的文章

自動(dòng)翻譯程序員英語(yǔ)

閱讀 2052·2021-10-08 10:05
共享IP的虛擬主機(jī)怎么運(yùn)行的-關(guān)于虛擬主機(jī)比較正確的做法？

閱讀 1892·2021-09-22 15:31
主機(jī)目錄權(quán)限設(shè)置多少-如何設(shè)置網(wǎng)站根目錄權(quán)限？

閱讀 3013·2021-09-22 15:13
開(kāi)始學(xué)習(xí)機(jī)器學(xué)習(xí)之前你必須要了解的知識(shí)有哪些？機(jī)器學(xué)習(xí)系列入門(mén)篇

閱讀 3492·2021-09-09 09:34
如何批量替換wordpress文章中的文字或域名(3種方法)

閱讀 2098·2021-09-03 10:46
web前端開(kāi)發(fā)中遇到的問(wèn)題整理記錄——2019-04

閱讀 3129·2019-08-30 15:56
css的居中布局問(wèn)題

閱讀 1709·2019-08-30 15:53
css動(dòng)畫(huà)實(shí)現(xiàn)呼吸圓

閱讀 2365·2019-08-30 15:44

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

資訊專欄INFORMATION COLUMN

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

前端每日實(shí)戰(zhàn)：106# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)沒(méi)有 DOM 元素的動(dòng)畫(huà)

相關(guān)文章