「 Ace浅末」 ✨

效果是这样的

这里是我仿写的

雪花需要用到canvas实现，但是canvas是我的知识盲区，所以我就在百度上找了个类似的

这里是源码

<template>
  <div id="app">
    <div id="bilibili-head" class="bilibili-head"
         :style="{'left':(proportionL<1 && proportionL!=''?-10*proportionL:(proportionR<1 && proportionR!=''?-10+-10*(1-proportionR):'-10'))+'vw',
         'transition':(proportionL <1 && proportionL!=''?'':(proportionR<1 && proportionR!=''?'':'.5s left'))}">
      <div class="ani">
        <div class="img1" @mouseenter="mouseenter" id="bilibili"
             :style="{'opacity': (proportionL <1 && proportionL!=''?proportionL:(proportionR<1 && proportionR!=''?proportionR:1))}">
          <img src="../static/bilibili/bg1.jpg">
        </div>
        <div class="img2"
             :style="{'opacity': 1-proportionL}"><img src="../static/bilibili/bg2.jpg">
        </div>
        <div class="img3"
             :style="{'opacity': 1-proportionR}"><img src="../static/bilibili/bg3.png"></div>
        <!--      -->
        <div class="img3 tree"
             :style="{'opacity': 1-proportionR}"><img src="../static/bilibili/bg4.png"></div>
        <!--      -->
        <div class="img2"
             :style="{'opacity': 1-proportionL}"><img src="../static/bilibili/bg5.png"></div>
        <!--      -->
        <div class="img4 tree"
             :style="{'opacity': (proportionL <1 && proportionL!=''?proportionL:(proportionR<1 && proportionR!=''?proportionR:1))}">
          <img src="../static/bilibili/bg6.png"></div>
        <!--      -->
        <div class="img2 tree"
             :style="{'opacity': 1-proportionL}"><img src="../static/bilibili/bg7.png"></div>
      </div>
      <canvas id="bilibili-canvas"></canvas>
    </div>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        fullWidth: document.documentElement.clientWidth,
        proportionL: '',
        proportionR: '',
        firstClientX: '',
      }
    },
    created() {
      var this_ = this
      this.$nextTick(function () {
        // this.$emit("showSakura",false)
        this_.initCanvas()
      })
    },
    methods: {
      initCanvas() {
        const canvas = document.getElementById('bilibili-canvas');
        canvas.setAttribute('style', 'position: absolute;pointer-events: none;z-index: 4');
        const canP = document.getElementById('bilibili-head')
        const ctx = canvas.getContext('2d')
        const canvasW = canP.offsetWidth
        const canvasH = canP.offsetHeight
        const particles = []
        // 数量
        const maxParticles = 100
        const random = function (min, max) {
          return Math.random() * (max - min) + min
        }
        window.requestAnimationFrame = (function () {
          const FPS = 60
          return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callBack) {
              window.setTimeout(callBack, 1000 / FPS)
            }
        })()
        const Particle = function () {
          this.x = Math.random() * canvasW
          this.y = Math.random() * canvasH
          // 大小
          this.r = random(1, 3)
          // 透明图
          this.alpha = random(1, 1)
          // 下落速度
          this.velocity = {
            // x: random(-0.35, 0.35),
            // y: random(0.75, 1.5)
            x: random(-0.35, -0.10),
            y: random(0.75, 0.90)
          }
          this.draw = function () {
            ctx.fillStyle = 'rgba(255, 255, 255, ' + this.alpha + ')'
            ctx.shadowColor = "rgba(255, 255, 255,1)";
            ctx.shadowBlur = 5;
            ctx.beginPath()
            ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false)
            ctx.closePath()
            ctx.fill()
          }
          this.moving = function () {
            this.x += this.velocity.x
            this.y += this.velocity.y
            if (this.y > canvasH) {
              this.x = Math.random() * canvasW
              this.y = 0
            }
            this.draw()
          }
        }
        init()

        function init() {
          canvas.width = canvasW
          canvas.height = canvasH
          for (var i = 0; i < maxParticles; i++) {
            particles.push(new Particle())
          }
          animate()
        }

        function animate() {
          ctx.clearRect(0, 0, canvasW, canvasH)
          particles.forEach(function (particle) {
            particle.moving()
          })
          requestAnimationFrame(animate)
        }
      },
      mouseenter(e) {
        var this_ = this
        var timeOutId = null;
        this.firstClientX = e.clientX
        var bilibili = document.getElementById("bilibili")
        var move = function (ev) {
          this_.proportionL = ev.clientX / this_.firstClientX
          this_.proportionR = (this_.fullWidth - ev.clientX) / (this_.fullWidth - this_.firstClientX)

          console.log(this_.proportionL,this_.proportionR)

          bilibili.onmousemove = null;
          timeOutId = setTimeout(function () {
            bilibili.onmousemove = move;
          }, 10);
        }
        bilibili.onmousemove = move
        bilibili.onmouseleave = function () {
          clearTimeout(timeOutId);
          bilibili.onmouseup = bilibili.onmousemove = null;
          this_.firstClientX = ''
          this_.proportionL = ''
          this_.proportionR = ''
        }
      },
    },
    mounted() {
      window.scrollTo(0, 0);
    },
    destroyed() {
      // this.$parent.routerLink = this.$router.currentRoute.fullPath;
    },
  }
</script>

<style scoped lang="scss">
  #app{
    width: 100vw;
    overflow: hidden;

    .bilibili-head {
      overflow: hidden;
      /*background: rgba(0, 0, 0, .5);*/
      /*padding-top: 90px;*/
      /*padding-bottom: 20px;*/
      /*margin: 0px auto 20px;*/
      min-height: 150px;
      height: auto;
      width: 120vw;
      position: relative;
      /*box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);*/
      /*display: flex;*/
      /*align-items: center;*/
      .ani {
        position: relative;

        img {
          width: 100%;
        }

        .img1 {
          position: absolute;
          z-index: 4;
        }

        .img2 {
          position: absolute;
          z-index: 2;
        }

        .img3 {
          position: absolute;
          z-index: 2;
        }

        .img4 {
          position: absolute;
          z-index: 4;
          pointer-events: none;
        }

        .tree {
          filter: blur(2px);
        }
      }
    }
  }
</style>