CSS -youtube 影片 - 水波文字動畫效果 - Day15 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 15

自我挑戰組

打造前端初學的知識培育庫系列第 15 篇

CSS -youtube 影片 - 水波文字動畫效果 - Day15

15th鐵人賽

skidoau

2023-09-30 23:46:32

255 瀏覽

分享至

哈囉事情是這樣的，這幾天作了幾個靜態網站，作了一些筆記，然後網路上有看到一些 CSS 教學覺得蠻有意思的，所以想來自己實作看看，哈哈！在最後面會放上參考網站及實作後的程式碼喲～
每天我都會將這篇文章裡的關鍵字、使用的語法、問題等做成清單，透過回想或許能幫助您加深記億喲/images/emoticon/emoticon08.gif

今天的關鍵字是 ...

有些知識點是已經學習過的，所以明日會學習紅色區塊喲~

參考影片 : https://www.youtube.com/watch?v=Tf6qm5JMUXQ

初步分析 :

建立置中的方塊。
方塊有2個文字疊在一起。並對他們做不同的樣式設計。
透過@keyframes
在不同%數時，設定不同弧度，讓他有水波的感覺。

開始實作 :

第一步建立環境，已經知道

文字動畫要放在中間
底下的文字要黑字、藍色描邊。
上面的文字要藍字、水波效果。
背景要黑色，曾能看出文字水波效果。

<body>
  <div class="content">
    <h2>Water</h2>
    <h2>Water</h2>
  </div>
</body>

2.現在要讓文字在中間，所以要使用display:flex、justifent-content:center、align-items:center、transform:translate(-50%,-50%)(本來只有左上角對其正中心，使用後可移動到最中間)、min-height:100vh、position(因為有2個文字要疊在一起使用absolute可幫忙跳脫頁面流實現重疊)

* {
  margin: 0;
  padding: 0;
  box-sizing: border box;
  font-family: "Poppins", sans-serif;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background:black;
}
.content h2 {
  font-size: 12rem;
  position: absolute;
  transform: translate(-50%, -50%);
}

3.現在要讓文字有陰影效果，挑選第1個子元素設定藍色描邊。

方法1 :

 .content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
}

color : transparent : 將文字設定透明，但文字依然存在，代表它仍占據頁面布局的空間，只是視覺看不見。
-webkit-text-stroke : 是供webkit瀏覽器使用的專有屬性，用於設置文字的描邊，因為是專有屬性所以在其他瀏覽器可能不會被支援，如果需要確保在不同瀏覽器的情況下都能正常運作，建議使用標準的CSS屬性:text-shadow。

現在的情況是 :
.demo1 是黑字，具有1px的藍色描邊。
.demo2 是黑字，無描邊。

可以試著對.demo2設定紅色看看，能更了解現在的位置關係。

現在的情況是 :
.demo1 是黑字，具有1px的藍色描邊。
.demo2 是紅字，無描邊。

現在只要你把背景調整成黑色就可以有藍色邊框的效果囉~

 body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: black;
}

現在就差最後一步啦~為.demo2增加水波效果，要產生出這樣的效果我們需要使用css clip-path maker。
點進網址後https://bennettfeely.com/clippy/
點選自訂多邊形(custom polygon)。
再到左方繪製你的水波造型。
複製下方程式碼貼到你@keyframes的0%及100%。
重複1~3繪製50%的水波造型。
在你的.demo2新增animation: animate 4s ease-in-out infinite;
animation (animation-name animation-duration animation-timing-function animation-interation-count)

@keyframes animate {
  0% {
    clip-path: polygon(
      0% 31%,
      19% 45%,
      29% 56%,
      39% 69%,
      49% 72%,
      61% 73%,
      68% 70%,
      78% 74%,
      88% 72%,
      100% 68%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0 60%,
      18% 53%,
      29% 56%,
      39% 59%,
      50% 50%,
      64% 44%,
      78% 48%,
      83% 62%,
      91% 55%,
      100% 48%,
      100% 100%,
      0% 100%
    );
  }
  100% {
    clip-path: polygon(
      0% 31%,
      19% 45%,
      29% 56%,
      39% 69%,
      49% 72%,
      61% 73%,
      68% 70%,
      78% 74%,
      88% 72%,
      100% 68%,
      100% 100%,
      0% 100%
    );
  }
}

0%跟100%相同，50%就是你接下來會移動的波紋~

這樣就大功告成啦~明天會再來講講今天的知識點~