首頁  >  文章  >  web前端  >  CSS filter:hue-rotate色調旋轉濾鏡實作按鈕大量生產

CSS filter:hue-rotate色調旋轉濾鏡實作按鈕大量生產

云罗郡主
云罗郡主轉載
2018-11-27 17:02:313436瀏覽


本篇文章帶給大家的內容是關於CSS filter:hue-rotate色調旋轉濾鏡實作按鈕批量生產,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

//zxx: 很多效果為CSS3濾鏡即時渲染,因此本文需要在Chrome等現代瀏覽器下瀏覽

一、傳統色值按鈕

傳統按鈕都是透過具體色值進行賦色的,例如下面這些按鈕和其對應的色值(來自LuLu UI):

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

有以下缺點:

每個按鈕還有不同的:hover和:active顏色需要額外設置,按鈕CSS代碼量較多,出現顏色也很多;

如果出現新的狀態按鈕,例如今年流行紫色,則需要一個紫色按鈕。開發同學需要求助於設計師,因為自己選的紫色的亮度和飽和度往往和現有的按鈕不搭。

實際上,有更簡單的方法按鈕賦色方法,可以規避上面的缺點,就是使用CSS3 filter濾鏡中的hue-rotate()色調旋轉濾鏡。

二、色調旋轉濾鏡下的按鈕

實際上,我們只需要寫好一個按鈕樣式,其他各種顏色按鈕都不需要再多此一舉寫一大堆CSS代碼。例如,現有藍色主按鈕如下:

主按鈕

以下就是我分鐘實現的35個其他顏色的按鈕:

CSS filter:hue-rotate色調旋轉濾鏡實作按鈕大量生產

Hover並點選按鈕,大家可以看到,包括:hover和:active偽類狀態也一起複製過來了。

實作很簡單,就是為已經實現的按鈕增加下面一行CSS即可:

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

對比示意

對比顯真章,已知寫好了一個藍色主按鈕CSS,現在要寫一個紅色按鈕樣式。

首先,色值法和色調法所使用HTML都是一樣的,如下:

<button class="ui-button ui-button-warning">红按钮</button>

但CSS方面的差異則就驚人了,見下表:

CSS filter:hue-rotate色調旋轉濾鏡實作按鈕大量生產

可以看到上面CSS程式碼量的對比,左邊是你雙十一之前的錢包,右邊是你雙十一之後的錢包,是不是差異驚人的大!

可以看出色調旋轉濾鏡實現按鈕的優點一:巨省程式碼,開發巨快!

前端也會設計

透過旋轉色調,我發現了LuLu UI原本按鈕中設計的諸多不科學的地方。

hover態不同的按鈕設計的不一致,主色按鈕hover是顏色加深,結果紅色按鈕是hover顏色減淡,失敗失敗。

從這個角度講,我們前端要比純靠視覺感受,靠取色工具在色板上點幾個差不多顏色的設計師要更會設計。所以,當我們需要一個新的紫色按鈕的時候,我們自己來就好了,把色調旋轉到紫色一欄,bingo,按鈕完成!如果找設計師幫忙找顏色(包括互動狀態共3色),得,按照我這麼多年合作的經驗,飽和度和亮度100%不一致,雖然視覺上好像一致。因為純靠視覺感受取色一定會存在偏差的。

這就是色調旋轉濾鏡實現按鈕的優點二:色值更精準,準過設計師!

三、hue-rotate濾鏡語法

hue-rotate濾鏡除了支援deg,還支援其它CSS3單位,如圈數turn以及弧度rad等。

例如:

hue-rotate(90deg)   /* 90度旋轉*/

hue-rotate(。5turn)       /* 180度旋轉*/

hue-rotate(3.142rad)     /* 3.142弧度旋轉,近似一圈,也就是360度*/

四、hue-rotate濾鏡與動效

hue-rotate濾鏡還可以用來實現很酷的動效,例如下面這個圖像變色的效果(GIF截圖):

實作程式碼其實很簡單:

CSS filter:hue-rotate色調旋轉濾鏡實作按鈕大量生產

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

就是一個色調360度不斷旋轉。

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

五、結語

相容性

IE不支持,Edge13 支持,其他瀏覽器支援。

因此,本技術適用於不需要考慮相容性的項目,如中後台管理頁面,內部項目,行動端項目等。 濾鏡玩的溜可以達到許多驚為天人的動效。

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

以上就是對CSS filter:hue-rotate色調旋轉濾鏡實現按鈕批量生產的全部介紹,如果您想了解更多有關CSS3教程,請關注PHP中文網。



以上是CSS filter:hue-rotate色調旋轉濾鏡實作按鈕大量生產的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:zhangxinxu.com。如有侵權,請聯絡admin@php.cn刪除