手持彈幕、霓虹燈牌小程序

• 頁面簡潔，功能一目了然，代碼無需修改可以直接發(fā)布到微信小程序。
• 頁面已經(jīng)集成了分享功能。
• 可用于表白，集會等活動場景

功能介紹

1. 支持自定義滾動彈幕，字體大小，背景色，滾動速度。
2. 支持霓虹燈模式，字體發(fā)光并閃爍。

小程序功能預覽

效果預覽，預覽效果被壓縮，不代表實際效果：
[圖片上傳失敗...(image-87059f-1700298977474)]

啟動步驟：

1. 安裝依賴

   npm install

2. 使用Hbuilder運行，可以運行在內(nèi)置瀏覽器或微信小程序

   [圖片上傳失敗...(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>

霓虹燈發(fā)光效果css

.mo2 span {
        animation: LetterColor 3s linear infinite;
        /* 計算每個字的動畫起始時間 */
        animation-delay: calc(0.1s * var(--o));
    }
    @keyframes LetterColor {
        0% {
            color: #fff;
            /* 利用模糊距離不同的陰影實現(xiàn)霓虹燈光暈效果 */
            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;
            /* 設置高斯模糊與色調(diào)，實現(xiàn)模糊效果和顏色變換 */
            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;
            /* 色調(diào)變換360度 */
            filter: blur(2px) hue-rotate(360deg);
        }
        100% {
            /* 動畫結束字變透明 */
            color: transparent;
            /* 動畫結束消除陰影 */
            text-shadow: none;
            /* 動畫結束色調(diào)重置 */
            filter: blur(2px) hue-rotate(0deg);
        }
    }