欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2020-08-13 16:39:14   作者：如果美是罪   我要評論
這篇文章主要介紹了使用css的filter寫鼠標滑過效果的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

使用css的filter寫鼠標滑過效果

<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>

鼠標沒有放上之前
無Hover

鼠標放上之后
有Hover

這里用到css filter:brightness(100)給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。如果值是0%或者0，圖像會全黑。值是100%，則圖像無變化。其他的值對應(yīng)線性乘數(shù)效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設(shè)定值，默認是1，如果想染圖片設(shè)置成白色，值為100。

因為傳統(tǒng)的hover給img換src第一次hover的時候會讓圖片閃白，因為需要重新加載圖片，這樣做的好處就是圖片只需要加載一次，當然這種做法也是有局限性的，歡迎指正

到此這篇關(guān)于使用css的filter寫鼠標滑過效果的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)css的filter鼠標滑過內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論