时间戳

首页 > 解决方案 > 如何在 CSS 中添加微光效果

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

问题描述

我正在设计一个网站，并尝试在 CSS 代码中为图像添加微光效果。下面是添加我正在使用的微光效果的代码（来源：使 CSS 微光效果工作已加载的图像）

  .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("https://i.stack.imgur.com/MeQxk.png");background-size:contain;background-repeat:no-repeat;background-position:center center}

我不确定如何完成这项工作。如果有人能告诉我怎么做 - 甚至更改添加微光的代码 - 这将非常有帮助。谢谢你。

标签： css

解决方案

这个 ？

.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("https://i.stack.imgur.com/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>

推荐阅读