很哇塞的网页特效之字符雨特效

        本篇分享的字符雨特效主要通过JS实现。

        实现步骤：

        1、页面分为50列（ 可根据样式中设置的字体大小调整列数，确保铺满整个页面），每列随机选取50个字符。

        2、字符置于 标签中展示，设置span样式 display:block 确保字符竖向按列排布。

        3、初始随机指定每一列中设置下雨效果的字符列表长度和起始位子，即雨点起始位置和雨线长度。

        4、在requestAnimationFrame中设置雨线字符颜色，改变雨线位置，实现下雨效果。

        实际效果：

     关键代码：

        在requestAnimationFrame中设置循环：

function loop(fn, delay) {
            let stamp = Date.now();
            function _loop() {
                if (Date.now() - stamp >= delay) {
                    fn(); stamp = Date.now();
                }
                requestAnimationFrame(_loop);
            }
            requestAnimationFrame(_loop);
        }

        改变雨线位置：

//通过移动下标指定改变雨线位置
            move() {
                this.body = [];
                let { offset, size } = this.options;
                for (let i = 0; i < size; ++i) {
                    let item = this.list[offset + i - size + 1];
                    this.body.push(item);
                }
                // 每次移动后雨线起始位置向后移，超过竖列长度后自动回到顶部
                this.options.offset = (offset + 1) % (this.list.length + size - 1);
            }

        设置雨线颜色：

//设置雨线部分各字符的颜色样式
            setColor() {
                this.body.forEach((c, i) => {
                    if (c) {
                        c.element.style = `
                                            color: hsl(136, 100%, ${85 / this.body.length * (i + 1)}%)
                                        `;
                        if (i == this.body.length - 1) {
                            // 雨线最底部点高亮显示
                            c.refreshText();
                            c.element.style = `
                                                color: hsl(136, 100%, 85%);
                                                text-shadow:
                                                    0 0 .5em #fff,
                                                    0 0 .5em currentColor;
                                            `;
                        }
                    }
                })
            }

        代码下载：很哇塞的网页特效之字符雨特效-网页制作文档类资源-CSDN下载