前端每日實(shí)戰(zhàn)：137# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)抽象的水波蕩漾的動(dòng)畫

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

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

效果預(yù)覽

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

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

可交互視頻

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

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

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

源代碼下載

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

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

代碼解讀

定義 dom，容器中包含 9 個(gè)元素：

居中顯示：

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

定義容器尺寸：

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

用 grid 布局把 9 個(gè)子元素排列成 3 * 3 的網(wǎng)格狀：

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

設(shè)置容器內(nèi)子元素的樣式，是通過偽元素來設(shè)置的：

.container span {
    position: relative;
}

.container span::before,
.container span::after 
{
    content: "";
    position: absolute;
    box-sizing: border-box;
    border-style: none solid solid none;
    border-width: 1em;
    border-color: gold;
    width: 100%;
    height: 100%;
}

旋轉(zhuǎn)容器，讓它的尖端朝上：

.container {
    transform: rotate(-135deg);
}

增加子元素尺寸由小到大變化的動(dòng)畫：

.container span::before,
.container span::after 
{
    animation: 
        animate-scale 1.6s linear infinite;
}

@keyframes animate-scale {
    from {
        width: 1%;
        height: 1%;
    }

    to {
        width: 100%;
        height: 100%;
    }
}

增加子元素邊框色變化的動(dòng)畫：

.container span::before,
.container span::after 
{
    animation: 
        animate-border-color 1.6s linear infinite,
        animate-scale 1.6s linear infinite;
}

@keyframes animate-border-color {
    0%, 25% {
        border-color: tomato;
    }

    50%, 75% {
        border-color: gold;
    }

    100% {
        border-color: black;
    }
}

增加子元素邊框?qū)挾茸兓膭?dòng)畫：

.container span::before,
.container span::after 
{
    animation: 
        animate-border-width 1.6s linear infinite,
        animate-border-color 1.6s linear infinite,
        animate-scale 1.6s linear infinite;
}

最后，讓 ::after 偽元素的動(dòng)畫時(shí)間慢半拍：

.container span::after {
    animation-delay: -0.8s;
}

@keyframes animate-border-width {
    0%, 100%{
        border-width: 0.1em;
    }

    25% {
        border-width: 1.5em;
    }
}

大功告成！

云服務(wù)器 GPU云服務(wù)器如何用css 如何用國外的服務(wù)器呢如何用微博推廣自己的網(wǎng)站如何用微博宣傳自己的網(wǎng)站

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

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

發(fā)表評論

登陸后可評論

0條評論

rottengeek

男|高級講師

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

TA的文章

tensorflow1

閱讀 2101·2023-04-25 17:23
如何讓selenium不彈出黑框

閱讀 2919·2021-11-17 09:33
krypt機(jī)房VPS品牌ion cloud：圣何塞數(shù)據(jù)中心cn2 gia vps簡單測評

閱讀 2513·2021-08-21 14:09
前端—初級階段3(9-12)

閱讀 3578·2019-08-30 15:56
前端每日實(shí)戰(zhàn)：137# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)抽象的水波蕩漾的動(dòng)畫

閱讀 2605·2019-08-30 15:54
清除浮動(dòng)的方法

閱讀 1622·2019-08-30 15:53
react-template-easily(簡單易用的react前端工程化模板)

閱讀 2126·2019-08-29 13:53
jQuery數(shù)十行代碼實(shí)現(xiàn)Material Design的漣漪效果

閱讀 1141·2019-08-29 12:31

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

資訊專欄INFORMATION COLUMN

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

前端每日實(shí)戰(zhàn)：137# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)抽象的水波蕩漾的動(dòng)畫

相關(guān)文章