如何使用CSSfilter:hue-rotate色調(diào)旋轉(zhuǎn)濾鏡實現(xiàn)按鈕批量生產(chǎn)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用CSS filter:hue-rotate色調(diào)旋轉(zhuǎn)濾鏡實現(xiàn)按鈕批量生產(chǎn)，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)是專業(yè)的武陵網(wǎng)站建設(shè)公司，武陵接單;提供網(wǎng)站制作、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行武陵網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

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

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

色值：#2486ff 色值：#01cf97 色值：#f4615c

有如下缺點：

每種按鈕還有不同的：hover和：active顏色需要額外設(shè)置，按鈕CSS代碼量較多，出現(xiàn)顏色也很多；

如果出現(xiàn)新的狀態(tài)按鈕，例如今年流行紫色，需要一個紫色按鈕。開發(fā)同學(xué)需要求助于設(shè)計師，因為自己選的紫色的亮度和飽和度往往和現(xiàn)有的按鈕不搭。

實際上，有更簡單的方法按鈕賦色方法，可以規(guī)避上面的缺點，就是使用CSS3 filter濾鏡中的hue-rotate（）色調(diào)旋轉(zhuǎn)濾鏡。

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

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

主按鈕

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

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

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

.btn { filter: hue-rotate（60deg）； }

對比示意

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

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

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

但CSS方面的差異則就驚人了，見下表：

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

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

前端也會設(shè)計

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

hover態(tài)不同的按鈕設(shè)計的不一致，主色按鈕hover是顏色加深，結(jié)果紅色按鈕是hover顏色減淡，失敗失敗。

從這個角度講，我們前端要比純靠視覺感受，靠取色工具在色板上點幾個差不多顏色的設(shè)計師要更會設(shè)計。所以，當(dāng)我們需要一個新的紫色按鈕的時候，我們自己來就好了，把色調(diào)旋轉(zhuǎn)到紫色一欄，bingo，按鈕完成！如果找設(shè)計師幫忙找顏色（包括交互狀態(tài)共3色），得，按照我這么多年合作的經(jīng)驗，飽和度和亮度100%不一致，雖然視覺上好像一致。因為純靠視覺感受取色一定會存在偏差的。

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

三、hue-rotate濾鏡語法

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濾鏡與動效

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

實現(xiàn)代碼其實很簡單：

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

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

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

五、結(jié)語

兼容性

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

因此，本技術(shù)適用于不需要考慮兼容性的項目，如中后臺管理頁面，內(nèi)部項目，移動端項目等。濾鏡玩的溜可以實現(xiàn)很多驚為天人的動效。

以前看過一個記住反相濾鏡實現(xiàn)火焰效果的動效，看了一會兒沒看明白，對色彩和濾鏡這塊掌握還不夠，不急，慢慢積累，總會明白的。

關(guān)于如何使用CSS filter:hue-rotate色調(diào)旋轉(zhuǎn)濾鏡實現(xiàn)按鈕批量生產(chǎn)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：如何使用CSSfilter:hue-rotate色調(diào)旋轉(zhuǎn)濾鏡實現(xiàn)按鈕批量生產(chǎn)
鏈接分享：http://muchs.cn/article10/gjsddo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、動態(tài)網(wǎng)站、網(wǎng)站改版、微信小程序、網(wǎng)站排名、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)