如何使用css的filter寫鼠標(biāo)滑過效果
這篇文章主要為大家展示了如何使用css的filter寫鼠標(biāo)滑過效果，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“如何使用css的filter寫鼠標(biāo)滑過效果”這篇文章吧。
創(chuàng)新互聯(lián)建站主打移動(dòng)網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、域名與空間、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實(shí)力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再?zèng)Q定采用什么樣的設(shè)計(jì)。最后，要實(shí)現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計(jì)，我們還會(huì)規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。
使用css的filter寫鼠標(biāo)滑過效果
鼠標(biāo)沒有放上之前
無Hover
鼠標(biāo)放上之后
有Hover
這里用到css filter:brightness(100)給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。如果值是0%或者0，圖像會(huì)全黑。值是100%，則圖像無變化。其他的值對(duì)應(yīng)線性乘數(shù)效果。值超過100%也是可以的，圖像會(huì)比原來更亮。如果沒有設(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寫鼠標(biāo)滑過效果”的內(nèi)容，如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前題目：如何使用css的filter寫鼠標(biāo)滑過效果
本文地址：
http://weahome.cn/article/ggpegs.html
重慶分公司
重慶分公司
