CSS实现流光特效，镜面特效，让你的页面拥有炫酷的前端效果

流光特效

 

 

   <template>
        <!-- reflect滑动效果占位dom -->
        <div class="reflect"></div>
  </template>

<script>

export default {



    }
</script>

<style lang="scss" scoped>

    .reflect {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      left: 0;
    }

 
    .reflect::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 160%;
      background: linear-gradient(to right bottom, #07070700, #0b0b0b00, #0b0b0b00, #0b0b0b07, #022783);
      -webkit-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -ms-transform: rotate(-59deg);
      transform: rotate(-59deg);
      // -webkit-animation: searchLights 8s ease-in 8s infinite;
      animation: searchLights 8s ease-in 8s infinite;
      filter: blur(5px);
    }
  }
}


@-webkit-keyframes searchLights {
  0% {
    left: 0%;
    top: 0;
  }

  to {
    left: 0%;
    top: 100px;
  }
}

@-moz-keyframes searchLights {
  0% {
    left: 0%;
    top: 0;
  }

  to {
    left: 0%;
    top: 100px;
  }
}

@keyframes searchLights {
  0% {
    left: -200%;
    top: 0;
  }

  to {
    left: 120%;
    top: 30%;
    height: 200%;
  }

</style>