新聞中心
這篇文章主要為大家展示了如何使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“如何使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果”這篇文章吧。
使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果
鼠標(biāo)沒(méi)有放上之前
無(wú)Hover
鼠標(biāo)放上之后
有Hover
這里用到css filter:brightness(100)給圖片應(yīng)用一種線性乘法,使其看起來(lái)更亮或更暗。如果值是0%或者0,圖像會(huì)全黑。值是100%,則圖像無(wú)變化。其他的值對(duì)應(yīng)線性乘數(shù)效果。值超過(guò)100%也是可以的,圖像會(huì)比原來(lái)更亮。如果沒(méi)有設(shè)定值,默認(rèn)是1,如果想染圖片設(shè)置成白色,值為100。
因?yàn)閭鹘y(tǒng)的hover給img換src第一次hover的時(shí)候會(huì)讓圖片閃白,因?yàn)樾枰匦录虞d圖片,這樣做的好處就是圖片只需要加載一次,當(dāng)然這種做法也是有局限性的。
以上就是關(guān)于“如何使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果”的內(nèi)容,如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò),勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí),若想了解更多相關(guān)知識(shí)內(nèi)容,請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目:如何使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果-創(chuàng)新互聯(lián)
分享地址:http://www.dlmjj.cn/article/dedggg.html