js代码雨

vue3实现代码雨， /* 右侧大云朵 */ box-shadow: 90px 0 0 30px #ffffff;

<template>
  <div class="code_box">
    <div class="container">
      <div class="cloud">
        <div v-for="(text, index) in texts" :key="index" class="text" :style="text.style">
          {{ text.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const texts = ref([])
// 生成随机字符push到数组里面
function generateText() {
  const letters = [];
  const numbers = [];
  const a = "a".charCodeAt(0);

  for (let i = 0; i < 26; i++) {
    letters.push(String.fromCharCode(a + i));

    if (i < 9) {
      numbers.push(i + 1);
    }
  };

  return [...letters, ...numbers];
};
// 生成随机字符
function randomText() {
  const textArray = generateText();
  const text = textArray[Math.floor(Math.random() * textArray.length)];

  return text;
};

let intervalId;

function rainEffect() {
  const text = randomText();
  const left = Math.floor(Math.random() * 310);
  const size = Math.random() * 1.5;
  // 随机8-10s
  const duration = Math.random(8) * 10;
  const styleSheets = {
    left: `${left}px`,
    fontSize: `${0.5 + size}em`,
    animationDuration: `${duration}s`,
  };
  texts.value.push({ value: text, style: styleSheets });

  // Remove the text after 2 seconds
  setTimeout(() => {
    texts.value.shift();
  }, 2000);

  // duration -= 0.01; // Decrease animation duration to speed up the animation
};

onMounted(() => {
  intervalId = setInterval(() => rainEffect(), 20);
});

onUnmounted(() => {
  clearInterval(intervalId);
});
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.code_box {
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #181c1f;
}

.container {
  width: 100%;
  height: 800px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-box-reflect: below 1px
    linear-gradient(transparent, transparent, transparent, transparent, #0005);
  position: relative;
}

.cloud {
  top: 50px;
  z-index: 100;

  /* 横向云朵 */
  width: 320px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 100px;

  /* drop-shadow函数将阴影效果应用于投影图像 */
  filter: drop-shadow(0 0 30px #ffffff);
}
.cloud::before {
  content: "";
  /* 左侧小云朵 */
  width: 110px;
  height: 110px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: -50px;
  left: 40px;

  /* 右侧大云朵 */
  box-shadow: 90px 0 0 30px #ffffff;
}

.cloud .text {
  position: absolute;
  top: 40px;
  height: 20px;
  line-height: 20px;

  text-transform: uppercase;
  color: #ffffff;
  /* 为文字添加阴影，看上去发光，增加视觉效果 */
  text-shadow: 0 0 5px #ffffff, 0 0 15px #ffffff, 0 0 30px #ffffff;
  transform-origin: bottom;
  animation: animate 2s linear forwards;
}

@keyframes animate {
  0% {
    transform: translateX(0);
  }

  70% {
    transform: translateY(590px);
  }

  100% {
    transform: translateY(690px);
  }
}
</style>

canvas实现的代码雨背景

<template>
  <div class="code_box">
    <canvas id="code_rain_canvas"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

window.onload = function () {
  //获取画布对象
  var canvas = document.getElementById("code_rain_canvas");
  //获取画布的上下文
  var context = canvas.getContext("2d");
  var s = window.screen;
  //获取浏览器屏幕的宽度和高度
  var W = window.innerWidth;
  var H = window.innerHeight;
  //设置canvas的宽度和高度
  canvas.width = W;
  canvas.height = H;
  //每个文字的字体大小
  var fontSize = 12;
  //计算列
  var colunms = Math.floor(W / fontSize);
  //记录每列文字的y轴坐标
  var drops = [];
  //给每一个文字初始化一个起始点的位置
  for (var i = 0; i < colunms; i++) {
    drops.push(0);
  }
  //运动的文字
  var str = "WELCOME TO WWW.ITRHX.COM";
  //4:fillText(str,x,y);原理就是去更改y的坐标位置
  //绘画的函数
  function draw () {
    context.fillStyle = "rgba(238,238,238,.08)"; //遮盖层
    context.fillRect(0, 0, W, H);
    //给字体设置样式
    context.font = "600 " + fontSize + "px  Georgia";
    //给字体添加颜色
    context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)]; //randColor();可以rgb,hsl, 标准色，十六进制颜色
    //写入画布中
    for (var i = 0; i < colunms; i++) {
      var index = Math.floor(Math.random() * str.length);
      var x = i * fontSize;
      var y = drops[i] * fontSize;
      context.fillText(str[index], x, y);
      //如果要改变时间，肯定就是改变每次他的起点
      if (y >= canvas.height && Math.random() > 0.99) {
        drops[i] = 0;
      }
      drops[i]++;
    }
  };

  function randColor () { //随机颜色
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
  }
  draw();
  setInterval(draw, 35);
};

</script>