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

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

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

功能介绍

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

小程序功能预览

效果预览，预览效果被压缩，不代表实际效果：

启动步骤：

1. 安装依赖

   npm install

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

   

部分代码演示

霓虹灯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);
	    }
	}

扫描二维码直接获取插件源码

搜索 弹幕 关键字，免费获取代码