CSS3的顏色漸變效果的示例代碼

2024-07-11 08:58:41

字體：大中小

供稿：網(wǎng)友

在animate.css尋找自己想要的動(dòng)態(tài)效果，看到標(biāo)題Animate.css和按鈕Animate it的顏色在逐漸變化，覺(jué)得蠻有趣的，把控制變化的相關(guān)代碼扒了下來(lái)，自己分析實(shí)現(xiàn)一波。

一開(kāi)始認(rèn)為使用了js控制顏色逐漸變化，看了看js文件，除了jQuery，就只有一小段用來(lái)DOM操作添加更改class的代碼。控制顏色變化不可能在這里。聯(lián)想到animate庫(kù)只用css來(lái)控制動(dòng)畫(huà)效果，那多半在css文件里。

變化的兩個(gè)部分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;}

以及一段很重要的代碼

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

重點(diǎn)部分就在于-webkit-animation，實(shí)際上animate庫(kù)基本都是用的這種方式實(shí)現(xiàn)各種動(dòng)畫(huà)的。

-webkit-animation: hue 60s infinite linear;

這里定義了一個(gè)名為hue的動(dòng)畫(huà)名，第二個(gè)參數(shù)設(shè)置動(dòng)畫(huà)持續(xù)時(shí)間為60s，第三個(gè)指定動(dòng)畫(huà)播放次數(shù)無(wú)限次，第四個(gè)設(shè)置速度變化（從頭到尾速度相同）。
CSS動(dòng)畫(huà)也是采用的關(guān)鍵幀的方法，下面的那一段就是在定義頭尾的關(guān)鍵幀，讓這個(gè)動(dòng)畫(huà)真正的動(dòng)起來(lái)！

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

就是說(shuō)從開(kāi)頭(0%)到結(jié)尾(100%)分別是什么狀態(tài)！再結(jié)合-webkit-animation第四個(gè)參數(shù)的速度變化，讓他更合理的動(dòng)起來(lái)！

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

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

用來(lái)調(diào)整可視效果？不明覺(jué)厲。再看看屬性hue-rotate()是什么意思：

給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。值為0deg，則圖像無(wú)變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒(méi)有最大值，超過(guò)360deg的值相當(dāng)于又繞一圈。

色相旋轉(zhuǎn)？？懂了好像又沒(méi)懂？作為前端工程師，基本的色彩原理還是要知道的：

這就是色相環(huán)，這里是24種代表顏色，實(shí)際在屏幕上可以顯示的RGB顏色有16萬(wàn)種。就是說(shuō)，上面的顏色變化，在一分鐘內(nèi)有16萬(wàn)種變化……

上面可以很明顯的知道這是一個(gè)圓環(huán)，hue-rotate()就定義了當(dāng)前顏色在這個(gè)圓環(huán)上的偏轉(zhuǎn)角度。

顏色變化大概就是這么多了，現(xiàn)在自己實(shí)現(xiàn)一下吧：

<!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">顏色漸變動(dòng)畫(huà)</h1></body></html>

最終的效果：