CSS-讓游標滑過圖片會有亮暗的特效

CSS-brightness

此文章已於 2018-10-25 更新

 

 

相信大家有看過一種CSS特效,在網頁剛載入完畢時,圖片是呈現暗的
然而一旦游標滑過,圖片就會瞬間亮起來
今天我們就是要來說明這個效果的簡易使用方式,具體程式碼為:

-webkit-filter:brightness(X)

其中使用的 brightness 是控制元素”亮”的程度,是CSS裡眾多濾鏡之一
而X可以輸入最低是0的數值(最暗)
在想要遮罩的元素上先給它這段就對啦,一般我自己使用都大概用 .5 就夠

好了!在元素預設上變暗的條件下,再來就是滑鼠的游標滑過去會變亮的效果
理所當然的,我們要用 hover 來完成,在{}裡使用的也是同一行程式碼
只是我們要改變 X 的數值,在一開始我們將 X 設定成 .5 的數值
此時只要在把 .5 改成 1 即可
馬上就去動手做做看吧!

這邊多分享幾種常用的CSS濾鏡,大家都可以各自試試

brightness:亮度
opacity:不透明
grayscale:灰階
contrast:對比
drop-shadow:下拉陰影
blur:模糊
sepia:懷舊
saturate:飽和
hue-rotate:色相旋轉
invert:負片

 

相關文章