如何在图像上创建闪亮效果（徽标）

Question

我找到了一些完全符合我期望的解决方案，但仅限于div元素。我尝试使用图像但没有成功。 有没有想过如何在PNG图像上添加闪亮效果？ Example: http://jsfiddle.net/nqQc7/289/

Answer 1

由于img标记不喜欢伪元素，因此您需要使用包装元素并absolute将img置于其中。像this demo这样的内容会显示，如下所示：

＆＃13;

＆＃13;

.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%;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;