css - 如何在CSS中添加微光效果

Question

我正在设计一个网站，并尝试在 CSS 代码中为图像添加闪烁效果。下面是我正在使用的添加微光效果的代码(来源:Make CSS Shimmer Effect Work an already loaded Image)

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

}

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

我正在尝试在这行代码中将效果添加到图像中。

.bottomhalf{padding:10px;padding-bottom:4px;background-image:url("/image/MeQxk.png");background-size:contain;background-repeat:no-repeat;background-position:center center}

我不知道如何完成这项工作。如果有人可以告诉我如何做到这一点 - 或者甚至更改添加闪光的代码 - 这将非常有帮助。谢谢。

Answer 1

这个？

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

.bottomhalf{
  padding:10px;
  padding-bottom:4px;
  background-image:url("/image/MeQxk.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center
}

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

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