在线与离线的状态变化 CSS动画

2021-02-23 本文已影响0人在小白的路上越走越远

结构

<span class="offLine">
  <img/>
</span>

方式1：通过:before 选择器来进行设置

.offLine:before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(0,0,0,.5);
}

方式2：通过filter属性来进行设置

img{
  filter:grayscale(100%);
}

filter方式更高效，目前初步判断filter与transform，opacity一样，可能在合成线程上实现，故耗时更短。