• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 288|回復: 0
      上一主題 下一主題

      CSS 制作波浪效果的思路

      80292

      主題

      0

      好友

      積分

      離線 發信

      跳轉到指定樓層
      樓主
      發表于 2021-07-25 19:58 | 只看該作者 | 倒序瀏覽

      在之前,我介紹過幾種使用純 CSS 實現波浪效果的方式,關于它們有兩篇相關的文章:

      純 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 還是非常有趣的~ 🤣

      最后

      好了,本文到此結束,希望對你有幫助 😃

      到此這篇關于CSS 制作波浪效果的思路的文章就介紹到這了,更多相關CSS制作波浪內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

      來源:http://www.jb51.net/css/775848.html