CSS3 Filter的十種特效

2022-09-16 17:42:22 字數 2410 閱讀 4058

filters主要是運用在上,以實現一些特效。(儘管他們也能運用於video上),不過我們在些只來討論上的運用。

語法

elm
其預設值是none,他不具備繼承性,其中filter-function乙個具有以下值可選:

grayscale灰度

sepia褐色(求專業指點翻譯)

saturate飽和度

hue-rotate色相旋轉

invert反色

opacity透明度

brightness亮度

contrast對比度

blur模糊

drop-shadow陰影

瀏覽器的相容性

下面我們一起來見證這些效果的實現過程,首先在頁面中有一張:

一、grayscale灰度

使用這個特效,會把變成灰色的,也就是說你的將只有兩種顏色「黑色」和「白色」

.grayscale
預設值:100%,

如果你在grayscale()中沒有任何引數值,將會以「100%」渲染。其效果下圖所示:

二、sepia

sepia不知道如何譯,暫時就叫他「褐色」,使用這種效果,你的好像很古老的一樣

.sepia
預設值:100%,

如果你在sepia()中沒有任引數值,將會以「100%」渲染,具體效果如下:

三、saturate飽和度

saturat是用來改變的飽和度

.saturate
預設值:100%,

如果我們將其值變大到300%

四、hue-rotate色相旋轉

hue-rotate用來改變的色相

.hue-rotate
預設值:0deg

五、invert反色

invert做出來的效果就像是我們照相機底面的效果一樣

.invert
預設值:100%

六、opacity透明度

這個就很好理解了,改變的透明度

.opacity
預設值:100%

七、brightness亮度

改變的亮度

.brightness
預設值:100%

八、contrast對比度

改變的對比度,整個psd的,都懂這個意思

.contrast
預設值:100%

九、blur模糊

一看字面意思就知道了,改變的清晰度

.blur
預設值:0

十、drop-shadow陰影

這個很像box-shadow一樣的效果,給加陰影效果

.drop-shadow

.custom
say hello to webkit filters

quick fun: css3 filter effects

filter effects 1.0

-webkit-filter是神馬?

css3中Filter的十種特效

css3的filter屬性簡單且強大,本篇是學習css3 filter所做的筆記。grayscale 灰度,值為0 1之間的小數 sepia 褐色 我喜歡叫古風濾鏡 值為0 1之間的小數 saturate 飽和度,值為num hue rotate 色相旋轉,值為angle invert 反色,值為0...

CSS3 filter屬性學習

filter屬性 css3的fliter屬性是乙個強大的工具,開發者可用它實現很多視覺效果 該屬性提拱了如陰影和改變顏色等效果,這些效果的在元素渲染是完成 該屬性通常用於調整的呈現 乙個元素的背景或者邊框。語法 filter me blur npx 設定高斯模糊,傳入乙個畫素單位,表示模糊半徑,預設...

css3 filter濾鏡屬性

css3 filter濾鏡屬性 注 ie瀏覽器暫不支援 1.灰度 grayscale value 值為百分比,在0 到100 之間,值為100 則完全轉為灰度影象,值為0 影象無變化,預設值是0 2.色相 hue rotate value 值為deg角度範圍無限制,色相環當到360deg後會重複0d...