如何使用CSS制作波浪效果

這篇文章主要介紹如何使用CSS制作波浪效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

從定積分實(shí)現(xiàn)曲邊三角形面積說(shuō)起

在進(jìn)入主題之前，先看看這個(gè)，在高等數(shù)學(xué)中，我們可以通過(guò)定積分求二次函數(shù)曲邊圖形面積。

我們可以將曲線下的面積分割成 n 個(gè)的細(xì)高的矩形，當(dāng) n 無(wú)限趨近于無(wú)窮時(shí)，所有矩形的面積就等于曲邊圖形的面積。

兩張簡(jiǎn)單的示意圖，圖取自為什么定積分可以求面積？：

當(dāng) n 無(wú)限趨近于無(wú)窮時(shí)，所有矩形的面積就等于曲邊圖形的面積：

利用這個(gè)思路，我們也可以通過(guò)多個(gè) div 在 CSS 中模擬出一條曲邊，也就是波浪線。

Step 1. 將圖形切割為多份

首先，我們可以定義一個(gè)父容器，父容器下有 12 個(gè)子 div：

<div class="g-container">
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
</div>

通過(guò) flex 布局，簡(jiǎn)單布局一下，得到這樣一個(gè)圖形，每個(gè)子元素等高：

.g-container {
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    display: flex;
    align-items: flex-end;
}

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #fff;
}

效果如下：

Step 2. 讓每個(gè)子元素以不同負(fù)延遲運(yùn)行高度變換動(dòng)畫

接下來(lái)，簡(jiǎn)單改造下，我們需要讓這個(gè)圖動(dòng)起來(lái)，通過(guò)改變每個(gè)子元素的高度實(shí)現(xiàn)：

.g-item {
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange 1s infinite ease-in-out alternate;
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}

效果如下：

接下來(lái)，只需要，讓每個(gè)子元素的動(dòng)畫順序設(shè)定一個(gè)不同時(shí)間的負(fù)延遲即可，就可以得到一個(gè)初步的波浪效果，這里為了減少工作量，我們借助 SASS 實(shí)現(xiàn)：

$count: 12;
$speed: 1s;

.g-item {
    --f: #{$speed / -12};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}

@keyframes heightChange {
    from {
        height: 60px;
    }
    to {
        height: 90px;
    }
}

這樣，我們就得到了一個(gè)初步的波浪效果：

Step 3. 消除鋸齒

可以看到，上述的波浪動(dòng)畫是存在一定的鋸齒的，接下來(lái)我們要做的就是盡可能的消除掉這些鋸齒。

法一：增加 div 的數(shù)量

按照一開(kāi)始使用定積分求曲邊圖形面積的思想，我們只需要盡可能增加子 div 的數(shù)量即可，當(dāng) div 的數(shù)量無(wú)窮多的時(shí)候，鋸齒也就會(huì)消失不見(jiàn)。

我們可以嘗試將上述的 12 個(gè)子 div，替換成 120 個(gè)試下，一個(gè)一個(gè)寫 120 個(gè) div 太費(fèi)力了，我們這里借助 Pug 模板引擎：

div.g-container
 -for(var i=0; i<120; i++)
    div.g-item

對(duì)于 CSS 代碼，只需要改動(dòng)動(dòng)畫延遲的時(shí)間即可，120 個(gè)子 div 的負(fù)延遲都控制在 1s 內(nèi)：

// 12 -- 120
$count: 120;
$speed: 1s;

.g-item {
    // 注意，只有這里發(fā)生了變化
    --f: #{$speed / -120};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: heightChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: calc(var(--f) * #{$i});
    }
}

這樣，我們就可以得到一條比較光滑的曲線啦：

法二：通過(guò) transform: skew() 模擬弧度

當(dāng)然，實(shí)際情況，使用那么多個(gè) div 實(shí)在是太浪費(fèi)了，那么有沒(méi)有其它方法在 div 數(shù)量比較少的情況下，也能夠盡可能的消除鋸齒呢？

這里，我們可以嘗試給子元素在運(yùn)動(dòng)變換的過(guò)程中添加不同的 transform: skewY() 去模擬弧度。

再改造下代碼，我們將 div 的數(shù)量調(diào)低，并且給每個(gè)子 div 再添加一個(gè) transform: skewY() 的動(dòng)畫效果：

div.g-container
 -for(var i=0; i<24; i++)
    div.g-item

完整的 CSS 代碼如下：

$count: 24;
$speed: 1s;

.g-item {
    // 注意，只有這里發(fā)生了變化
    --f: #{$speed / -24};
    flex-grow: 1;
    height: 60px;
    background-color: #000;
    animation: 
        heightChange $speed infinite ease-in-out alternate,
        skewChange $speed infinite ease-in-out alternate;
}

@for $i from 0 to $count {
    .g-item:nth-child(#{$i + 1}) {
        animation-delay: 
            calc(var(--f) * #{$i}), 
            calc(var(--f) * #{$i} - #{$speed / 2});
    }
}

@keyframes heightChange {
    from {
        height: var(--h);
    }
    to {
        height: calc(var(--h) + 30px);
    }
}

@keyframes skewChange {
    from {
        transform: skewY(20deg);
    }
    to {
        transform: skewY(-20deg);
    }
}

為了方便理解，首先看看，高度變換動(dòng)畫一致的情況下，子 div 的添加了 skewY() 的變換是如何的：

能看到每次變換是有明顯的突起的鋸齒的，疊加上延遲的高度變換，就能夠很好的消除大部分的鋸齒效果：

至此，我們就得到了另外一種 div 數(shù)量適中的消除鋸齒的方法！上述所有效果的完整代碼，你可以戳這里：

CodePen -- PureCSS Wave Effects

混合使用

最后，我們可以通過(guò)調(diào)整幾個(gè)變量參數(shù)，將幾個(gè)不同的波浪效果組合在一起，得到一些組合效果，也很不錯(cuò)。

類似這樣：

CodePen -- PureCSS Wave Effects 2

基于此，我聯(lián)想到我們公司（Shopee）的母公司 -- Sea Group 的 LOGO，它長(zhǎng)得如下：

利用本文的方案，給它實(shí)現(xiàn)一個(gè)動(dòng)態(tài)的 LOGO 動(dòng)畫：

CodePen Demo -- PureCSS Wave - Sea Group Logo

缺點(diǎn)

該方案的缺點(diǎn)還是很明顯的：

• 首先是廢 div，需要比較多的 div 來(lái)實(shí)現(xiàn)效果，而且 div 越多，效果會(huì)越好，當(dāng)然增加到一定程度，卡頓是不可避免的

• 鋸齒無(wú)法完全消除，這個(gè)是最致命或者說(shuō)影響它真正能夠有用武之地的地方吧

當(dāng)然，本文的目的重點(diǎn)更多的是開(kāi)拓一下思維，探討一下這種方式的優(yōu)劣，實(shí)現(xiàn)動(dòng)畫的整個(gè)過(guò)程，動(dòng)畫負(fù)延遲時(shí)間的運(yùn)用，都是有一些參考學(xué)習(xí)意義的。CSS 還是非常有趣的~

什么是css

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

以上是“如何使用CSS制作波浪效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！