使用css的filter寫鼠標(biāo)滑過效果的實(shí)現(xiàn)示例

使用css的filter寫鼠標(biāo)滑過效果
<div class="filter-div"> <img class="filter-img" src="../assets/images/01list.png"/> </div> <style> .filter-div { width: 67px; height: 50px; background: #fff; &:hover { background: #5d7aae; } } .filter-img { width: 67px; height: 50px; &:hover { filter: brightness(100); } } </style>
鼠標(biāo)沒有放上之前
無Hover
鼠標(biāo)放上之后
有Hover
這里用到css filter:brightness(100)給圖片應(yīng)用一種線性乘法,使其看起來更亮或更暗。如果值是0%或者0,圖像會全黑。值是100%,則圖像無變化。其他的值對應(yīng)線性乘數(shù)效果。值超過100%也是可以的,圖像會比原來更亮。如果沒有設(shè)定值,默認(rèn)是1,如果想染圖片設(shè)置成白色,值為100。
因?yàn)閭鹘y(tǒng)的hover給img換src第一次hover的時(shí)候會讓圖片閃白,因?yàn)樾枰匦录虞d圖片,這樣做的好處就是圖片只需要加載一次,當(dāng)然這種做法也是有局限性的,歡迎指正
到此這篇關(guān)于使用css的filter寫鼠標(biāo)滑過效果的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)css的filter鼠標(biāo)滑過內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了css3 filter屬性的使用簡介,幫助大家更好的理解和學(xué)習(xí)使用css3,感興趣的朋友可以了解下2021-03-30
CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的示例代碼
這篇文章主要介紹了CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的示例代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-02-24CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼
這篇文章主要介紹了CSS3 filter(濾鏡)實(shí)現(xiàn)網(wǎng)頁灰色或者黑色模式的代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以2020-11-30css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解
這篇文章主要介紹了css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面2020-09-14詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用
這篇文章主要介紹了詳解CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別與應(yīng)用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友2020-08-24- CSS filter屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素形成濾鏡,濾鏡通常用于調(diào)整圖像,背景和邊框的渲染。本文給大家分享CSS filter 有什么神奇用途,感興趣的朋友跟隨小2021-05-25