CSS 在徽标图像上加载闪耀效果

Question

我想对徽标图片实现闪耀效果，这应该是一个微妙的加载指示。

应该类似于这样：

.icon:hover:after {
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

http://jsfiddle.net/AntonTrollback/nqQc7/

并继续，同时将“正在加载”类附加到 img。

有一个简单的CSS方法可以做到这一点吗？

Answer 1

这是相同的代码笔

#logo {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 100px;
overflow: hidden;
}
#logo img {
width: 100%;
}
#logo:before {
content: '';
position: absolute;
top: 0;
left: -100px;
width: 70px;
height: 100%;
background: rgba(255,255,255, 0.3);
transform: skewX(-30deg);
animation-name: slide;
animation-duration: 7s;
animation-timing-function: ease-in-out;
animation-delay: .3s;
animation-iteration-count: infinite;
animation-direction: alternate;
background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}
@keyframes slide {
  0% {
    left: -100;
    top: 0;
  }
  50% {
    left: 120px;
    top: 0px;
  }
  100% {
    left: 290px;
    top: 0;
  }
}

<div id="logo">
  <a href="https://www.keralpatel.com/how-to-achieve-shine-effect-on-your-logo-image/" target="_blank"><img src="https://www.keralpatel.com/logo.png"></a>
</div>

有关调整设置的完整详细信息：https://www.keralpatel.com/how-to-achieve-shine-effect-on-your-logo-image/