如何在CSS中为背景图片添加shimmer（微光）动效

实现方法 #

你可以直接将shimmer效果属性合并到现有的.bottomhalf类中，也可以保留原shimmer类、给DOM元素同时绑定两个类使用，以下是两种方案的具体操作：

方案1：直接整合到.bottomhalf类（推荐，无需修改HTML结构）

直接替换你原有CSS代码即可，已经补全了标准mask属性适配更多浏览器，删除了原shimmer类中对背景图无效的冗余属性：

.bottomhalf {
  padding: 10px;
  padding-bottom: 4px;
  background-image: url("https://i.sstatic.net/MeQxk.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  /*  shimmer效果相关属性  */
  display: inline-block;
  -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%;
  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%;
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  100% {
    -webkit-mask-position: left;
    mask-position: left;
  }
}

如果你的.bottomhalf元素需要占满整行宽度，把display: inline-block改为display: block即可，不影响shimmer效果。

方案2：保留原有shimmer类

先修改原shimmer类删除冗余属性：

.shimmer {
  display: inline-block;
  -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%;
  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%;
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  100% {
    -webkit-mask-position: left;
    mask-position: left;
  }
}

再给你对应的DOM元素同时加上shimmer类即可，示例HTML结构：

<div class="bottomhalf shimmer"></div>

内容的提问来源于stack exchange，提问作者JBird