css:hover用法（4） .闪亮效果

<template>
  <div>
    <div id="shiny-shadow">
      <button><span>Hover me</span></button>
    </div>
  </div>
</template>
<script>
export default {
  name: "page",
  props: {},
  data() {
    return {
      name: "这是子组件的name",
    };
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
#shiny-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #1c2541;
}

button {
  border: 2px solid white;
  background: transparent;
  text-transform: uppercase;
  color: white;
  padding: 15px 50px;
  outline: none;
  overflow: hidden;
  position: relative;
}

span {
  z-index: 20;
}

button:after {
  content: "";
  display: block;
  position: absolute;
  top: -36px;
  left: -100px;
  background: white;
  width: 50px;
  height: 125px;
  opacit