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

發(fā)布時(shí)間：2020-08-13 16:39:14 作者：如果美是罪

這篇文章主要介紹了使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

使用css的filter寫(xiě)鼠標(biāo)滑過(guò)效果

<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)沒(méi)有放上之前
無(wú)Hover

鼠標(biāo)放上之后
有Hover

這里用到css filter:brightness(100)給圖片應(yīng)用一種線(xiàn)性乘法，使其看起來(lái)更亮或更暗。如果值是0%或者0，圖像會(huì)全黑。值是100%，則圖像無(wú)變化。其他的值對(duì)應(yīng)線(xiàn)性乘數(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ò)效果的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)css的filter鼠標(biāo)滑過(guò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！