njDaTuSha/src/pages/pg2/smoke.vue

<template>
  <div>
    <div class="smoke-container">
      <span>SS</span>
    </div>
    <div class="smoke-container" style="animation-delay: 1s;">
      <span>SS</span>
    </div>
    <div class="smoke-container" style="animation-delay: 2s;">
      <span>SS</span>
    </div>
    <div class="smoke-container" style="animation-delay: 3s;">
      <span>SS</span>
    </div>
    <div class="smoke-container" style="animation-delay: 4s;">
      <span>SS</span>
    </div>
    <div class="smoke-container" style="animation-delay: 5s;">
      <span>SS</span>
    </div>
    <div class="smoke-container" style="animation-delay: 6s;">
      <span>SS</span>
    </div>
    <svg width="0">
      <filter id="smoke-filter">
        <feTurbulence id="turbulence" type="fractalNoise" baseFrequency=".03" numOctaves="100" />
        <feDisplacementMap in="SourceGraphic" scale="30" />
      </filter>
    </svg>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const filter = document.querySelector("#turbulence");
  let frames = 0;
  let rad = Math.PI / 180;
  let bf, bfx, bfy;

  let d = 1;
  function freqAnimation() {
      frames += d * 1;
      // if (frames > 360) {
      //   frames = 0;
      // }

      bfx = 0.03;
      bfy = 0.03;

      bfx += 0.005 * Math.cos(frames * rad);
      bfy += 0.005 * Math.sin(frames * rad);

      bf = [bfx, bfy].join(' ');
      console.log(frames, bfx, bfy)
      filter.setAttributeNS(null, "baseFrequency", bf);

      window.requestAnimationFrame(freqAnimation);
  }

  // window.requestAnimationFrame(freqAnimation);
})
</script>


<style lang="less">
.smoke-container {
  position: absolute;
  width: 24px;
  margin: auto;
  filter: url('#smoke-filter');
  animation: ani-smoke 6s linear infinite forwards;

  span {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    filter: blur(10px);
  }

  @keyframes ani-smoke {
    0% {
      transform: translateY(0) rotate(-80deg);
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      transform: translateY(-400%) rotate(-80deg);
      opacity: 0;
    }
  }
}
</style>