图片光束动画

图片光束动画

在图片所在容器中放入：

<div class="animation-wrapper">
  <div class="animation-inner"></div>
</div>

css样式：

.animation-wrapper{ 
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.animation-inner{
  height: 100%;
  width: 100%;
}
.animation-inner::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
  transform: scale3d(2, 1, 1) rotate(60deg) translate3d(15%, -150%, 0);
  transition: transform 0.3s ease-in-out;
}

.animation-inner:hover::after{
  transform: scale3d(2, 1, 1) rotate(60deg) translate3d(0, 130%, 0);
}