CSS Image Shine

Question

我需要这个图像来回闪烁几次，而不是一直悬停，但

https://jsfiddle.net/aeauur87/1/

.button {
    background:url(http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Legend%20Banners/Double%20MPU/button.png);
    width:148px;
    height:166px;
    position:absolute;
    top:1px;
    left:1px;

}

由于

Answer 1

您可以将伪元素用于关键帧动画：

＆＃13;

＆＃13;

.button {
  background: url(http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Legend%20Banners/Double%20MPU/button.png);
  width: 148px;
  height: 166px;
  position: absolute;
  top: 1px;
  left: 1px;
  overflow: hidden;
}
.button:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 150%;
  height: 150%;
  width: 100px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
  -webkit-animation: 2s myani linear infinite;
  animation: 2s myani linear infinite;
}
@-webkit-keyframes myani {
  0% {
    top: 100%;
    left: 150%;
  }
  100% {
    top: -150%;
    left: -150%;
  }
}
@keyframes myani {
  0% {
    top: 100%;
    left: 150%;
  }
  100% {
    top: -150%;
    left: -150%;
  }
}

＆＃13;

<div class="button"></div>

＆＃13;

＆＃13;

＆＃13;

注意

这将无限运行，但可以通过更改动画的迭代次数来更改