在图像（徽标）上创建光扫描效果（闪亮）

Question

我想给一张图片加光扫效果，看起来很闪亮。

期望的行为：（就像在这个图像中，但是图像，但是光在移动）

我发现了一些解决方案完全符合我的预期，但仅限于 div 个元素。我尝试用图像申请，但没有成功。知道如何在 PNG 图像上添加闪亮效果吗？ Example: http://jsfiddle.net/nqQc7/289/

Answer 1

因为 img 标签不喜欢伪元素，所以您需要使用包装器元素，并且 absolute只能在其中放置您的 img。显示 this demo 之类的内容，如下所示：

.wrap {
  display: inline-block;
  height: 200px;
  width: 200px;
  position: relative;
  overflow: hidden;
}
.wrap img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.wrap:before {
  content: "";
  z-index: 10;
  position: absolute;
  height: 200%;
  width: 200%;
  top: -120%;
  left: -120%;
  background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 100%);
  transition: all 2s;
  transform: rotate(-45deg);
  animation: shine 6s infinite forwards;
}
@keyframes shine {
  0% {
    top: -120%;
    left: -120%;
  }
  20% {
    left: 100%;
    top: 100%;
  }
  40% {
    left: 100%;
    top: 100%;
  }
  100% {
    left: 100%;
    top: 100%;
  }
}

<div class="wrap">
  <img src="http://placehold.it/200/200" />
  <div>

在图像（徽标）上创建光扫描效果（闪亮）

Creating a light sweep effect (shiny) on an image (logo)

css

effects