//zxx: 很多效果為CSS3濾鏡實(shí)時(shí)渲染，因此本文需要在Chrome等現(xiàn)代瀏覽器下瀏覽

一、傳統(tǒng)色值按鈕

傳統(tǒng)按鈕都是通過(guò)具體色值進(jìn)行賦色的，例如下面這些按鈕和其對(duì)應(yīng)的色值（出自 LuLu UI ）：

有如下缺點(diǎn)：

每種按鈕還有不同的 :hover 和 :active 顏色需要額外設(shè)置，按鈕CSS代碼量較多，出現(xiàn)顏色也很多；
如果出現(xiàn)新的狀態(tài)按鈕，例如今年流行紫色，需要一個(gè)紫色按鈕。開(kāi)發(fā)同學(xué)需要求助于設(shè)計(jì)師，因?yàn)樽约哼x的紫色的亮度和飽和度往往和現(xiàn)有的按鈕不搭。
實(shí)際上，有更簡(jiǎn)單的方法按鈕賦色方法，可以規(guī)避上面的缺點(diǎn)，就是使用CSS3 filter濾鏡中的 hue-rotate() 色調(diào)旋轉(zhuǎn)濾鏡。

二、色調(diào)旋轉(zhuǎn)濾鏡下的按鈕

實(shí)際上，我們只需要寫好一個(gè)按鈕樣式，其他各種顏色按鈕都無(wú)需再多此一舉寫一大堆CSS代碼。例如，現(xiàn)有藍(lán)色主按鈕如下：

下面就是我分分鐘實(shí)現(xiàn)的35個(gè)其他顏色的按鈕：

Hover并點(diǎn)擊按鈕，大家可以看到，包括 :hover 和 :active 偽類狀態(tài)也一起復(fù)制過(guò)來(lái)了。

實(shí)現(xiàn)很簡(jiǎn)單，就是給已經(jīng)實(shí)現(xiàn)的按鈕增加下面一行CSS即可：

.btn { filter: hue-rotate(60deg); }

對(duì)比示意

對(duì)比顯真章，已知寫好了一個(gè)藍(lán)色主按鈕CSS，現(xiàn)在要寫一個(gè)紅色按鈕樣式。

首先，色值法和色調(diào)法所使用HTML都是一樣的，如下：

<button class="ui-button ui-button-warning">紅按鈕</button>

但CSS方面的差異則就驚人了，見(jiàn)下表：

可以看到上面CSS代碼量的對(duì)比，左邊是你雙十一之前的錢包，右邊是你雙十一之后的錢包，是不是差異驚人的大！

可以看出色調(diào)旋轉(zhuǎn)濾鏡實(shí)現(xiàn)按鈕的優(yōu)點(diǎn)一： 巨省代碼，開(kāi)發(fā)巨快！

前端也會(huì)設(shè)計(jì)

通過(guò)旋轉(zhuǎn)色調(diào)，我發(fā)現(xiàn)了LuLu UI原本按鈕中設(shè)計(jì)的諸多不科學(xué)的地方。

綠色按鈕太亮了，顏色根本不在一個(gè)飽和度范圍內(nèi)，是個(gè)失敗的取舍，這也是為什么在LuLu UI這個(gè)項(xiàng)目中，綠色按鈕幾乎沒(méi)怎么用的原因，看上去不搭，原來(lái)是設(shè)計(jì)師的鍋！
hover態(tài)不同的按鈕設(shè)計(jì)的不一致，主色按鈕hover是顏色加深，結(jié)果紅色按鈕是hover顏色減淡，失敗失敗。
從這個(gè)角度講，我們前端要比純靠視覺(jué)感受，靠取色工具在色板上點(diǎn)幾個(gè)差不多顏色的設(shè)計(jì)師要更會(huì)設(shè)計(jì)。所以，當(dāng)我們需要一個(gè)新的紫色按鈕的時(shí)候，我們自己來(lái)就好了，把色調(diào)旋轉(zhuǎn)到紫色一欄，bingo，按鈕完成！如果找設(shè)計(jì)師幫忙找顏色（包括交互狀態(tài)共3色），得，按照我這么多年合作的經(jīng)驗(yàn)，飽和度和亮度100%不一致，雖然視覺(jué)上好像一致。因?yàn)榧兛恳曈X(jué)感受取色一定會(huì)存在偏差的。

這就是色調(diào)旋轉(zhuǎn)濾鏡實(shí)現(xiàn)按鈕的優(yōu)點(diǎn)二： 色值更精準(zhǔn)，準(zhǔn)過(guò)設(shè)計(jì)師！

三、hue-rotate濾鏡語(yǔ)法

hue-rotate 濾鏡除了支持 deg ，還支持其它CSS3單位，如圈數(shù) turn 以及弧度 rad 等。

例如：

hue-rotate(90deg)   /* 90度旋轉(zhuǎn) */
hue-rotate(.5turn)       /* 180度旋轉(zhuǎn) */
hue-rotate(3.142rad)     /* 3.142弧度旋轉(zhuǎn)，近似一圈，也就是360度 */

四、hue-rotate濾鏡與動(dòng)效

hue-rotate濾鏡還可以用來(lái)實(shí)現(xiàn)很酷的動(dòng)效，例如下面這個(gè)圖像變色的效果（GIF截屏）：

實(shí)現(xiàn)代碼其實(shí)很簡(jiǎn)單：

.bird {
    animation: pulse 5s linear infinite;
}
@keyframes pulse {
    from { filter: hue-rotate(0); }
    to { filter: hue-rotate(360deg); }
}

就是一個(gè)色調(diào)360度不斷旋轉(zhuǎn)。

眼見(jiàn)為實(shí)，您可以狠狠地點(diǎn)擊這里： CSS hue-rotate濾鏡改變圖片顏色動(dòng)效demo

這種動(dòng)效方法特別適合色彩豐富的圖形或圖像。

五、結(jié)語(yǔ)

兼容性

IE不支持，Edge13+支持，其他瀏覽器支持。

因此，本技術(shù)適用于不需要考慮兼容性的項(xiàng)目，如中后臺(tái)管理頁(yè)面，內(nèi)部項(xiàng)目，移動(dòng)端項(xiàng)目等。

其他

濾鏡玩的溜可以實(shí)現(xiàn)很多驚為天人的動(dòng)效。

以前看過(guò)一個(gè)記住反相濾鏡實(shí)現(xiàn)火焰效果的動(dòng)效，看了一會(huì)兒沒(méi)看明白，對(duì)色彩和濾鏡這塊掌握還不夠，不急，慢慢積累，總會(huì)明白的。

總結(jié)

以上所述是小編給大家介紹的CSS filter:hue-rotate色調(diào)旋轉(zhuǎn)濾鏡實(shí)現(xiàn)按鈕批量生產(chǎn)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論