Makzan

我管理世界職業技能競賽之網站技術項目、舉辦本地設計與開發賽事、開課分享技術心得。一個用網頁來表達自己的作家。

CSS 動畫|Happy New Year 2022

這個效果使用了之前講解的 CSS 漸層用於文字的效果,配合 @keyframes 動畫效果而成。針對每個字,我們設定其定位為 position: absolute,預設位置於下方 translateY(120%),動畫時間為 1.8 秒,但為達至移入的爽感,移入耗時 10%,停頓 80%,最後 10% 移走。

2022 年第一日,睡到上午 11:30 起床,砌了一會兒積木,吃個午餐後,13:30 繼續睡,在傍晚臨起床時,半夢半醒下想起以下這個 CSS 效果,便起床實作了出來。

Happy New Year CSS Effect

這個效果使用了之前講解的 CSS 漸層用於文字的效果,配合 @keyframes 動畫效果而成。 我們分三個階段實現:

  1. 第一階段:動畫:https://codepen.io/makzan/pen/VwMXbLY
  2. 第二階段:彩虹漸層色:https://codepen.io/makzan/pen/ZEXxKWq
  3. 最終成品:https://codepen.io/makzan/pen/abLYWmr

HTML 代碼

首先 HTML 部份,是以 h1 大標題配合 span,語義上仍然是這頁最重要的文字作為大標題,及當中的分割是視覺效果而非意義上的鍾割,所以不是用 p 而是用 span。當沒有 CSS 時,是一句普通的 “Happy New Year 2022”,沒有跳行。

<h1 id="animation">  <span>Happy</span>
  <span>New</span>
  <span>Year</span>
  <span>2022</span>
</h1>

CSS 樣式

然後我們開始慢慢實現 CSS 樣式。

首先,我們置中整個 h1,於 body 設定 grid 及 place-items,由於高度自動跟內容,所以我們手動設定高度為 100vh,即 100% 的 viewport-height 視口高度,便可以水平垂直置中。

    body {
      display: grid;
      place-items: center;
      height: 100vh;
    }

字體方面,我從 Google Fonts 選擇了 Montserrat,足夠粗體,一會的漸層背景會更突出。

於 CSS 中載入: @import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap');

    #animation {
      font-family: 'Montserrat', Arial Black, sans-serif;
      font-weight: 900;
      font-size: 20vw;
      text-align: center;  
    }

字體大細需要足夠大,且隨視窗大小自動調整,我設定為 20vw,即 20% viewport-width。

動畫效果

以下我將各元素的位置呈現出來,紅色框為 h1 的尺寸,若設定為 overflow: hidden 後,紅色框以外將會隱藏看不見。

藍色框為每個 span 的位置,由於 span 使用 position: absoluteh1 的框需使用非 static 的位置,例如 position: relative

動畫效果的位置原理
#animation {      
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 1.5em;
}

每個 span 位置首先在下方(translateY 120%),然後移入正常位置 0%,再移到上方(translateY -110%)。

為此,我們製作一個 moveUpAndGone 關鍵幀 @keyframes

@keyframes moveUpAndGone {
  0% { transform: translateY(120%); }
  10% { transform: translateY(0); }
  90% { transform: translateY(0); }
  100% { transform: translateY(-110%); }
}

而最後的 2022 span,由於移入後不需要移走,所以有另一組關鍵幀 moveUp

@keyframes moveUp {
  0% { transform: translateY(120%); }
  10% { transform: translateY(0); }
  100% {transform: translateY(0);}
}

針對每個字的 span,我們設定其定位為 position: absolute,預設位置於下方 transform: translateY(120%),動畫使用剛剛定義的 moveUpAndGone,時間為 1.8 秒,但為達至移入的爽感,移入耗時 10%,停頓 80%,最後 10% 移走。而 CSS 動畫可以設定 animation-fill-mode,即完成後是復位還是保持完結位置。我們想保持完結位置,所以選擇 animation-fill-mode: forwards

#animation span {
  --animation-time: 1.8s;
  display: block;
  position: absolute;
  width: 100%;
  transform: translateY(120%);
  animation: moveUpAndGone var(--animation-time);
  animation-fill-mode: forwards;
}

我們有四組字,每組延遲些許移入。我們可以設定 animation-delay,移入延遲為每組動畫需時減少少的倍數。

#animation span:nth-child(1){
  animation-delay: calc(var(--animation-time) - 0.1s);
}
#animation span:nth-child(2){
  animation-delay: calc( (var(--animation-time) - 0.1s) * 2);
}
#animation span:nth-child(3){
  animation-delay: calc( (var(--animation-time) - 0.1s) * 3);
}
#animation span:nth-child(4){
  animation-name: moveUp;
  animation-delay: calc( (var(--animation-time) - 0.1s) * 4);
}

以下為第一階段完成後的效果。

第一階段動畫成果

加入漸層效果

配合以前介紹的CSS 漸變色文字效果製作及使用 CSS 漸變色畫彩虹色,我們可以得出以下彩色視覺效果。

@supports (background-clip: text) {      
  #animation span {
    background-image: linear-gradient(
      to bottom, red 20%,
      orange 20%, orange 40%,
      yellowgreen 40%, yellowgreen 60%,
      blue 60%, blue 80%,
      purple 80%
    );  
    background-clip: text;
    background-size: 50% 50%;
    color: transparent;        
  }
}
加入彩虹漸層

最終效果

但上述視覺感覺還不夠酷,我心目中想配個黑底光暈的 2022 效果。所以,我改為配上一個黑色底,用一個圖形漸層令中間稍光。

body {      
  background: black radial-gradient(rgba(60,60,60), black);
}

而每組字,我把漸層換成以下紋理,由對比色紫色和黃色組成,配以少量藍色及黃綠色。我刻意將背景大小設定為 5%,並向右下漸層,從而緛成不斷重覆的斜三角形紋理。

@supports (background-clip: text) {
  #animation span {
    background-image: linear-gradient(
      to bottom right, blue 20%,
      purple 20%, purple 40%,
      yellow 40%, yellow 60%,
      yellowgreen 60%, yellowgreen 80%,
      yellow 80%
    );  
    background-clip: text;
    background-size: 5% 5%;
    color: transparent;        
  }
}
修改了漸層紋理

然後配上些許用文字陰影組成的光暈效果及文字白框,便可以得出最終的視覺效果。

#animation span {  
  text-shadow: 0 0 .1em rgba(255,255,255,.7);
  -webkit-text-stroke: 3px white;
  text-stroke: 3px white;
}
加入文字邊框及文字陰影組成的光暈效果

以下為三個階段的代碼:

  1. 第一階段:動畫:https://codepen.io/makzan/pen/VwMXbLY
  2. 第二階段:彩虹漸層色:https://codepen.io/makzan/pen/ZEXxKWq
  3. 最終成品:https://codepen.io/makzan/pen/abLYWmr


👇🏻 選取 Result 可以預覽效果。

選取 Result 可以預覽效果。

Happy New Year! 🎉

— 麥誠 Makzan,2022-01-01。


我是麥誠軒(Makzan),除了正職外,平常我要麼辦本地賽與辦世界賽,要麼任教編程與網站開發的在職培訓。現正轉型將面授培訓內容寫成電子書、網上教材等,至今撰寫了 7 本書, 2 個視頻教學課程。

如果我的文章有價值,請左下角 👍🏻按讚支持,或訂閱贊助我持續創作及分享。


麥誠 Makzan


喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明

使用 CSS 漸變色畫彩虹色 🌈

CSS | 使用漸變色畫背景紋理

CSS 漸變色文字效果製作

2

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區