iT邦幫忙

2025 iThome 鐵人賽

DAY 9
2
Modern Web

關於那些有趣的 CSS 效果系列 第 9

( Day 9 ) 純 CSS 漸層色的轉場與動畫

  • 分享至 

  • xImage
  •  

還記得交響情人夢最後一集在海邊的那個美麗傍晚,野田妹甜甜的笑著,背後橘紅色的天空慢慢變成了紫紅色,我心想,天呀!不知道純的 CSS 可不可以做出這種漂亮的漸層轉場或動畫呢?一定要很純的那種喔!那就來試試看吧!

 純 CSS 漸層色的轉場與動畫

正文開始

在正常的情況下,CSS 無法製作「漸層色轉場」或「漸層色動畫」,但只要運用 CSS 的自訂屬性「@property」就能做出漸層色的轉場與動畫效果,這篇教學會介紹相關做法。

CSS 教學 - CSS 漸層色的轉場與動畫

漸層色的轉場 ( transition )

下方範例先透過 @property 建立 --c1--c2 兩個「顏色」屬性值,接著設定在轉場 transition 中指定這兩個屬性值的轉場時間 ( 自訂屬性值需要額外設定 ),以及在漸層色中使用這兩個自訂屬性,最後hover 懸停事件發生時修改屬性值,就能實現漸層色的轉場。

<!-- HTML 程式碼 -->
<h1>oxxo</h1>

<!-- CSS 程式碼 -->
<style>
  /* 設定第一組顏色 */
  @property --c1 {
    syntax: "<color>";
    inherits: true;
    initial-value: red;
  }
  /* 設定第二組顏色 */
  @property --c2 {
    syntax: "<color>";
    inherits: true;
    initial-value: yellow;
  }
  h1 {
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    color: red;
    text-align: center;
    font-size: 60px;
    line-height: 200px;
    transition: all 1s, --c1 1s,  --c2 1s;              /* 分別指定轉場時間 */
    background: linear-gradient(var(--c1), var(--c2));  /* 設定漸層色 */
  }
  h1:hover{
      color: blue;
      --c1: cyan;    /* 改變屬性值 */
      --c2: green;   /* 改變屬性值 */
  }
</style>

CSS 教學 - CSS 漸層色的轉場與動畫 - 漸層色的顏色轉場 ( transition )

自訂屬性不單純只能設定顏色,下方範例改成「角度」和「百分比」的自訂屬性,就能運用漸層色,做出許多特別的轉場效果。

線上展示:https://codepen.io/oxxo/pen/JoPrJxv

<!-- HTML 程式碼 -->
<h1>oxxo</h1>

<!-- CSS 程式碼 -->
<style>
  /* 角度自訂屬性 */
  @property --angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 180deg;
  }
  /* 百分比自訂屬性 */
  @property --p1 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 33%;
  }
  /* 百分比自訂屬性 */
  @property --p2 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 66%;
  }
  h1 {
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    color: #fff;
    text-align: center;
    font-size: 60px;
    line-height: 190px;
    transition: all 1s, --angle 1s, --p1 1s, --p2 1s;  /* 分別指定轉場時間 */
    background: linear-gradient(var(--angle),
                                #fff 0%, 
                                #fff var(--p1),
                                #09c var(--p1),
                                #09c var(--p2),
                                #069 var(--p2),
                                #069 100%);           /* 設定漸層色 */
  }
  h1:hover{
      color: #000;
      --angle: 135deg;   /* 改變屬性值 */
      --p1: 80%;         /* 改變屬性值 */
      --p2: 90%;         /* 改變屬性值 */
  }
</style>

CSS 教學 - CSS 漸層色的轉場與動畫 - 漸層色的位置轉場 ( transition )

漸層色的動畫 ( animation )

下方範例先透過 @property 建立 --p1--p2--p3 三個「長度」屬性值,接著設定在定義動畫的 @keyframes 中修改自訂屬性,就能實現漸層色的動畫效果。

<!-- HTML 程式碼 -->
<h1></h1>

<!-- CSS 程式碼 -->
<style>
  /* 定義第一個位置屬性 */
  @property --p1 {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
  }
  /* 定義第二個位置屬性 */
  @property --p2 {
    syntax: "<length>";
    inherits: true;
    initial-value: 20px;
  }
  /* 定義第三個位置屬性 */
  @property --p3 {
    syntax: "<length>";
    inherits: true;
    initial-value: 40px;
  }
  h1 {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background-image: repeating-linear-gradient(
        45deg,
        orange var(--p1),  orange var(--p2),
        black var(--p2), black var(--p3));     /* 設定漸層色 */
    animation: 1s linear infinite oxxo;        /* 設定動畫 */
  }

  @keyframes oxxo {
    0% {
      --p1: 0px;     /* 改變屬性值 */
      --p2: 20px;   /* 改變屬性值 */
      --p3: 40px;   /* 改變屬性值 */
    }
    100% {
      --p1: 40px;   /* 改變屬性值 */
      --p2: 60px;   /* 改變屬性值 */
      --p3: 80px;   /* 改變屬性值 */
    }
  }
</style>

CSS 教學 - CSS 漸層色的轉場與動畫 - 漸層色的動畫 ( animation )

小結

透過 @property 自訂屬性,可以讓原本無法進行轉場或動畫效果的「漸層」變得有趣,也可以讓原本不容易處理的效果變得方便,有機會不妨在自己的網站中使用看看。


上一篇
( Day 8 ) 純 CSS 漸層色製作星空背景
下一篇
( Day 10 ) 純 CSS 彈跳的正方形動畫
系列文
關於那些有趣的 CSS 效果35
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言