CSS3的顏色漸變效果

時間 2019-12-08

標籤 css3 css 顏色漸變效果欄目 CSS 简体版

原文原文鏈接

在 animate.css尋找本身想要的動態效果，看到標題Animate.css和按鈕Animate it的顏色在逐漸變化，以爲蠻有趣的，把控制變化的相關代碼扒了下來，本身分析實現一波。css

一開始認爲使用了js控制顏色逐漸變化，看了看js文件，除了jQuery，就只有一小段用來DOM操做添加更改class的代碼。控制顏色變化不可能在這裏。聯想到animate庫只用css來控制動畫效果，那多半在css文件裏。html

變化的兩個部分HTML和CSS分別以下前端

<h1 class="site__title mega">Animate.css</h1>

.site__title {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
}

<button class="butt js--triggerAnimation">Animate it</button>

.butt {
    border: 2px solid #f35626;
    line-height: 1.375;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-weight: 700;
    color: #f35626;
    cursor: pointer;
    -webkit-animation: hue 60s infinite linear;
}

以及一段很重要的代碼git

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

重點部分就在於-webkit-animation，實際上animate庫基本都是用的這種方式實現各類動畫的。github

-webkit-animation: hue 60s infinite linear;

這裏定義了一個名爲hue的動畫名，第二個參數設置動畫持續時間爲60s，第三個指定動畫播放次數無限次，第四個設置速度變化（從頭至尾速度相同）。
CSS動畫也是採用的關鍵幀的方法，下面的那一段就是在定義頭尾的關鍵幀，讓這個動畫真正的動起來！web

from {
    ...
}
to {
    ...
}

就是說從開頭(0%)到結尾(100%)分別是什麼狀態！再結合-webkit-animation第四個參數的速度變化，讓他更合理的動起來！前端工程師

-webkit-filter我也不知道什麼意思，查查W3C怎麼講的吧。動畫

filter 屬性定義了元素(一般是<img>)的可視效果(例如：模糊與飽和度)。spa

用來調整可視效果？不明覺厲。再看看屬性hue-rotate()是什麼意思：code

給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值爲0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值至關於又繞一圈。

色相旋轉？？懂了好像又沒懂？做爲前端工程師，基本的色彩原理仍是要知道的：

這就是色相環，這裏是24種表明顏色，實際在屏幕上能夠顯示的RGB顏色有16萬種。就是說，上面的顏色變化，在一分鐘內有16萬種變化……

上面能夠很明顯的知道這是一個圓環，hue-rotate()就定義了當前顏色在這個圓環上的偏轉角度。

顏色變化大概就是這麼多了，如今本身實現一下吧：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .title{
            color: #48c0c0;
            -webkit-animation: hue 5s infinite linear;
        }
        @keyframes hue {
            from {
                -webkit-filter: hue-rotate(0deg);
            }
            to {
                -webkit-filter: hue-rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <h1 class="title">顏色漸變更畫</h1>
</body>
</html>

最終的效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。