淺談巧妙運用 CSS 製作波浪效果的思路

這篇文章帶大家了解下巧妙使用 CSS 製作波浪效果的想法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

本文將會再介紹另一種使用 CSS 實現的波浪效果，想法非常有趣。

從定積分實現曲邊三角形面積說起

在進入主題之前，先看看這個，在高等數學中，我們可以透過定積分求二次函數曲邊圖形面積。

我們可以將曲線下的面積分割成 n 個的細高的矩形，當 n 無限趨近於無窮時，所有矩形的面積就等於曲邊圖形的面積。

兩張簡單的示意圖，圖取自為什麼定積分可以求面積？ ：

當n 無限趨近於無窮時，所有矩形的面積就等於曲邊圖形的面積：

利用這個思路，我們也可以透過多個div 在CSS 中模擬出一條曲邊，也就是波浪線。

Step 1. 將圖形切割成多份

首先，我們可以定義一個父容器，父容器下有12 個子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>

透過flex 佈局，簡單佈局一下，得到這樣一個圖形，每個子元素等高：

.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-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;
    }
}

效果如下：

接下來，只需要，讓每個子元素的動畫順序設定一個不同時間的負延遲即可，就可以得到初步的波浪效果，這裡為了減少工作量，我們藉助SASS 實現：

$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;
    }
}

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

Step 3. 消除鋸齒

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

法一：增加div 的數量

按照一開始使用定積分求曲邊圖形面積的思想，我們只需要盡可能增加子div 的數量即可，當div 的數量無窮多的時候，鋸齒就會消失。

我們可以嘗試將上述的12 個子div，替換成120 個試下，一個一個寫120 個div 太費力了，我們這裡借助

Pug 模板引擎：

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

對於CSS 程式碼，只需要改動動畫延遲的時間即可，120 個子div 的負延遲都控制在1s 內：

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

.g-item {
    // 注意，只有这里发生了变化
    --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});
    }
}

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

法二：透過transform: skew() 模擬弧度

當然，實際情況，使用那麼多div 實在是太浪費了，那麼有沒有其它方法在div 數量比較少的情況下，也能夠盡可能的消除鋸齒呢？

這裡，我們可以嘗試為子元素在運動變換的過程中加入不同的

transform: skewY() 去模擬弧度。

再改造下程式碼，我們將div 的數量調低，並且給每個子div 再增加一個

transform: skewY() 的動畫效果：

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

完整的CSS 程式碼如下：

$count: 24;
$speed: 1s;

.g-item {
    // 注意，只有这里发生了变化
    --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);
    }
}

為了方便理解，首先看看，高度變換動畫一致的情況下，子div 的添加了

skewY() 的變換是如何的：

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

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

CodePen -- PureCSS Wave Effects

#混合使用

最後，我們可以透過調整幾個變數參數，將幾個不同的波浪效果組合在一起，得到一些組合效果，也很不錯。

類似這樣：

CodePen -- PureCSS Wave Effects 2

基於此，我聯想到我們公司（Shopee）的母公司-- Sea Group 的LOGO，它長得如下：

#利用本文的方案，給它實作一個動態的LOGO 動畫：

CodePen Demo -- PureCSS Wave - Sea Group Logo

缺點

##該方案的缺點還是很明顯的：
• 首先是廢div，需要比較多的div 來實現效果，而且div 越多，效果會越好，當然增加到一定程度，卡頓是不可避免的

鋸齒無法完全消除，這個是最致命或者說影響它真正能夠有用武之地的地方吧

當然，本文的目的重點更多的是開拓一下思維，探討一下這種方式的優劣，實現動畫的整個過程，動畫負延遲時間的運用，都是有一些參考學習意義的。 CSS 還是非常有趣的~

原文網址：https://segmentfault.com/a/1190000040017751

作者：chokcoco

#更多程式設計相關知識，請造訪：

程式設計影片###！ ！ ###

以上是淺談巧妙運用 CSS 製作波浪效果的思路的詳細內容。更多資訊請關注PHP中文網其他相關文章！