代码雨效果

反正大家肯定都不爱看文字，实现过程就都写代码注释里面了?

<template>
    <div ref="mainrouter" class="mainrouter"
        style="background-color: black;position: relative;overflow: hidden;padding: 0;">
        <!-- 现在有一道题，要求做出代码雨的效果，你要怎么实现 -->
        <!-- 首先要解决代码垂直排布的样式 -->
        <!-- 然后，然后你想想哈，这么多代码雨是不是由每一条代码雨组成的，那我们现在就一条一条来加上去-->
        <!-- 最后你想，这一条动起来了，那我要一大堆怎么动呢，当然for循环游戏就好了 -->
        <!-- 别忘了，每个代码雨执行动画要有间隔，不然就一起动了，肯定不好看 -->
        <div class="code" ref="code" v-for="(item, index) in codenum" :style="{ '--width': codenum, }" :key="index">
            <div :model="data" v-for="(item2, index2) in 15" :key="index2">{{ getRandomChar() }}</div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
// 获取界面mainrouter的高度
const mainrouter = ref()
const code = ref()
const h = ref();
const w = ref();
const codeh = ref();
const codew = ref();
// 存放代码雨的数量
const codenum = ref(1);
// const w = mainrouter.offsetWidth;
onMounted(() => {
    h.value = mainrouter.value.offsetHeight;
    w.value = mainrouter.value.offsetWidth;
    codeh.value = code.value[0].offsetHeight;
    codew.value = 20;
    codenum.value = Math.floor(w.value / codew.value);
})
// 定义一个获取随机颜色的函数
function getRandomColor() {
    return '#' + ('0000' + (Math.random() * 0x100000 << 0).toString(16)).substr(-6);
}
// 定义一个获取随机英文或数字的函数
function getRandomChar() {
    const a = Math.floor(Math.random() * 2);//生成一个0或1的随机数
    const data = a ? String.fromCharCode(Math.floor(Math.random() * 26) + 97) : Math.floor(Math.random() * 10)
    //生成一个0或1的随机数，如果是0，则生成一个字母，如果是1，则生成一个数字
    return data
}
// 定义一个获取随机数字的函数
function getRandomNum() {
    return Math.floor(Math.random() * 10);
}
// 1秒执行一次这个函数
const data = ref();
setInterval(() => {
    data.value = getRandomChar();
}, 1000);
</script>
<style lang="scss">
$num:var(--width);
.code {
    width: 20px !important;
    // font-size: 14px;
    // 文字颜色透明
    color: transparent;
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0), #0f0);
    // 背景只覆盖文字
    background-clip: text;
    // 宽度适应内容,ie不兼容
    width: fit-content;
    width: -moz-fit-content; //兼容火狐
    // 文字垂直显示
    // writing-mode: vertical-lr;
    display: flex;
    flex-direction: column;
    position: absolute;
    animation: identifier 4s linear infinite; //linear匀速 infinite无限重复

    // 向下动画
    @keyframes identifier {
        0% {
            top: 0;
        }

        100% {
            top: 80%;
        }
    }

    @for $i from 1 through 10000 {
        &:nth-child(#{$i}) {
            // 要空格($i - 1)
            left: (($i - 1)*20px);
            // animation-delay: -1.4s*$i;
            $randomNumber: round(random() * 100); // 生成一个0到100之间的随机整数
            animation-delay: -1.4s*round(random() * 100);
        }
    }
}
</style>

?