论坛 › 欢乐水吧 › 小薇 【黑黑彩字文本应用】

亚伦影音工作室 发表于 2026-6-3 08:32

小薇 【黑黑彩字文本应用】

本帖最后由 亚伦影音工作室 于 2026-6-3 09:16 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
       #papa{left: -38%; top: 30%; width:1164px;position: relative; height:620px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:#006400;}
   .lefto {
            position: absolute;
            width: 45%;
            margin: 60px;
      }
      .tp {background:url('https://pic1.imgdb.cn/item/6a043d8b6f6a2d474b49f2a1.png') no-repeat center/100%;
            text-align: center; width: 600px; height: 350px;
      }
      #gc{position: absolute;
          top: 60px;
            left: 60%;
            text-align: center;
            list-style-type: none;
            height: 500px;font-weight: 500;
            line-height: 60px;
            }
         /* CSS自定义高亮代码 */
    ::highlight(c1) { color: #ADFF2F; }
    ::highlight(c2) { color: #FAEBD7; }
    ::highlight(c3) { color: magenta; }
    ::highlight(c4) { color: #eee; }
    ::highlight(c5) { color: #fff000; }
    ::highlight(c6) { color: #00ff00; }
    ::highlight(c7) { color: #ff0000; }
       .start{color: #ccc;position: absolute; top:74%; left: 22%;}
.end{color: #ccc;position: absolute;top:74%; left: 33%;}
      #btn{background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover;width:50px;height: 50px;left: 27%; top: 72%;position: absolute;
}
#prog {position: absolute;z-index: 8;
      width: 600px;border-radius:100px;
      height: 25px;background:#008000;
      cursor: pointer;
         bottom: 45px;
left:5%;
border-radius: 1px;}
#prog-bar {
            height: 100%;
            background: #808000;
            width: 0%;
      }
   
</style>

<div id="papa">
<div class="lefto">
            <div class="tp">
                </div>
            </div>
                  
<span class="start">00:00</span><p id="btn"></p><span class="end">00:00</span>
         <div id="prog" title="播放进度条"><div id="prog-bar"></div></div>


<div id="gc">
<marquee id="marquee"scrollAmount=1 width=400 height=500 direction=up> <font face="Liu Jian Mao Cao" size="5" ><p style="text-align: center;"><fontsize="6">小薇<br></font>

有一个美丽的小女孩<br>
她的名字叫作小薇<br>
她有双温柔的眼睛<br>
她悄悄偷走我的心<br>
小薇啊<br>
你可知道我多爱你<br>
我要带你飞到天上去<br>
看那星星多美丽<br>
摘下一颗亲手送给你<br><br><br>
有一个美丽的小女孩<br>
她的名字叫作小薇<br>
她有双温柔的眼睛<br>
她悄悄偷走我的心<br>
小薇啊<br>
你可知道我多爱你<br>
我要带你飞到天上去<br>
看那星星多美丽<br>
摘下一颗亲手送给你<br>
小薇啊<br>
你可知道我多爱你<br>
我要带你飞到天上去<br>
看那星星多美丽<br>
摘下一颗亲手送给你<br>
小薇啊<br>
你可知道我多爱你<br>
我要带你飞到天上去<br>
看那星星多美丽<br>
摘下一颗亲手送给你<br>
</p></font></marquee>
         </div>


    </div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3386678937.mp3" autoplay loop ></audio>
    <script>
      var music = document.getElementById('aud');
      var marquee= document.getElementById('marquee');
      var btn = document.getElementById('btn');
      btn.onclick = function() {
            if (aud.paused) {
                aud.play();
                marquee.start();
                btn.style.background = 'url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png) no-repeat 0px 0px/cover';
               } else {
                marquee.stop();
                aud.pause();
                btn.style.background = 'url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover';
}
   };
const start = document.querySelector('.start')
   const end= document.querySelector('.end')
function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
   
}, 1000)
prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
aud.addEventListener('timeupdate', () => {
          varpercent= (aud.currentTime / aud.duration) * 100;
            progBar.style.width = percent + '%';
      });



    </script>


<script>
    // 步骤一：注册高亮样式并存入数组
    let hl_ar = [];

    ['c1','c2', 'c3', 'c4', 'c5', 'c6', 'c7'].forEach(c => {
      const hl = new Highlight();
      hl_ar.push(hl);
      CSS.highlights.set(c, hl); // 注册当前样式
    });

    // 步骤二：获取并保存 id="gc" 元素全部文本节点
    let allTxtNodes = []; // 文本节点数组

    // 创建 TreeWalker 对象实例
    const walker = document.createTreeWalker(gc, NodeFilter.SHOW_TEXT);
    let currentNode = walker.nextNode(); // 当前文本节点

    // 递归获取+保存所有文本节点
    while (currentNode) {
      allTxtNodes.push(currentNode); // 存储文本节点
      currentNode = walker.nextNode(); // 下一个节点
    }

    // 步骤三：遍历所有文本节点+着色
    allTxtNodes.forEach(node => {
      for (let i = 0; i < node.textContent.length; i ++) {
            const range = new Range(); // 创建实例化文本范围
            range.setStart(node, i); // 范围起始位置
            range.setEnd(node, i + 1); // 范围结束位置
            // 取颜色范围内随机数
            const idx = Math.floor(Math.random() * hl_ar.length);
            hl_ar.add(range); // 着色（文本范围绑定高亮样式）
      }
    });
</script>

梦油 发表于 2026-6-3 10:54

亚伦的每一幅作品都让人拍案叫绝。

老谟深虑 发表于 2026-6-3 16:40

欣赏老师的佳作，点赞！

红影 发表于 2026-6-3 22:39

这文字的颜色好像还是随机排布的。
真漂亮，欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2026-6-3 22:42

亚纶用了黑黑的彩色字体，我都不晓得黑黑发过这个教程{:4_198:}

小辣椒 发表于 2026-6-3 22:42

欣赏亚纶精彩制作{:4_187:}

查看完整版本: 小薇 【黑黑彩字文本应用】