手持弹幕、霓虹灯牌小程序源码

手持弹幕、霓虹灯牌小程序

• 页面简洁，功能一目了然，代码无需修改可以直接发布到微信小程序。
• 页面已经集成了分享功能。
• 可用于表白，集会等活动场景

功能介绍

1. 支持自定义滚动弹幕，字体大小，背景色，滚动速度。
2. 支持霓虹灯模式，字体发光并闪烁。

小程序功能预览

效果预览，预览效果被压缩，不代表实际效果：
[图片上传失败...(image-87059f-1700298977474)]

启动步骤：

1. 安装依赖

   npm install

2. 使用Hbuilder运行，可以运行在内置浏览器或微信小程序

   [图片上传失败...(image-30df33-1700298977474)]

部分代码演示

霓虹灯div

    <div class="mo2" :style="{'display':showSwitch?'block':'none'}" >
        <div @click="clickMarquee()" :style="{fontSize: fontValue +'px'}">
            <span v-for="(item,index) in showText.split('')" :style="{'--o':index}">{{item}}</span>
        </div>
    </div>

霓虹灯发光效果css

.mo2 span {
        animation: LetterColor 3s linear infinite;
        /* 计算每个字的动画起始时间 */
        animation-delay: calc(0.1s * var(--o));
    }
    @keyframes LetterColor {
        0% {
            color: #fff;
            /* 利用模糊距离不同的阴影实现霓虹灯光晕效果 */
            text-shadow: 
            0 0 10px #00b3ff,
            0 0 20px #00b3ff,
            0 0 40px #00b3ff,
            0 0 80px #00b3ff,
            0 0 120px #00b3ff,
            0 0 200px #00b3ff,
            0 0 300px #00b3ff,
            0 0 500px #00b3ff;
            /* 设置高斯模糊与色调，实现模糊效果和颜色变换 */
            filter: blur(2px) hue-rotate(0deg);
        }
        30%,
        70% {
            color: #fff;
            /* 减少光晕大小 */
            text-shadow: 
            0 0 10px #00b3ff,
            0 0 20px #00b3ff,
            0 0 40px #00b3ff,
            0 0 80px #00b3ff,
            0 0 120px #00b3ff,
            0 0 200px #00b3ff;
            /* 色调变换360度 */
            filter: blur(2px) hue-rotate(360deg);
        }
        100% {
            /* 动画结束字变透明 */
            color: transparent;
            /* 动画结束消除阴影 */
            text-shadow: none;
            /* 动画结束色调重置 */
            filter: blur(2px) hue-rotate(0deg);
        }
    }