手持弹幕、霓虹灯牌小程序
- 页面简洁，功能一目了然，代码无需修改可以直接发布到微信小程序。
- 页面已经集成了分享功能。
- 可用于表白，集会等活动场景
功能介绍
- 支持自定义滚动弹幕，字体大小，背景色，滚动速度。
- 支持霓虹灯模式，字体发光并闪烁。
小程序功能预览
效果预览，预览效果被压缩，不代表实际效果：
[图片上传失败...(image-87059f-1700298977474)]
启动步骤：
-
安装依赖
npm install -
使用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);
}
}
