使用vue做图片的闪光效果

思路：使用一个空标签，宽高和图片一样，使用background-image: -moz-linear-gradient()将空标签渲染为一个渐变色的图形，然后使用transform: skewX()使得图形倾斜，然后当鼠标移到图片上时，这个图形从图片上面平移过去；

<template>
  <div class="container">
    <div class="image">
      <img :src="img" alt="图片加载失败" />
      <div class="flash"></div>
    </div>
  </div>
</template>

export default {
  props: {
    img: {
      type: String,
      default: ""
    }
  }
}

.container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  .image {
    width: 100%;
    height: 100%;
    position: relative;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .flash {
      position: absolute;
      width: 100%;
      height: 100%;
      left: -137%;
      top: 0;
      background-image: -moz-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
      );
      background-image: -webkit-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
      );
      transform: skewX(-25deg);
    }
    &:hover .flash {
      animation: flash 0.8s ease-in forwards;
    }
  }
}
@keyframes flash {
  0% {
    left: -137%;
  }
  100% {
    display: none;
    left: 137%;
  }
}

使用该组件的例子

<template>
  <div>
    <div style="width: 300px; height: 480px;padding-bottom: 50px;">
      <flash :img="flashImg"></flash>
    </div>
  </div>
</template>

import flash from './Flash/flash';
export default {
  components: { flash },
  data() {
    return {
      flashImg: require("../assets/flash.jpg")
    };
  },
};