希望夏天的风吹来好消息
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
/* 七彩文字高亮样式 */
::highlight(c1) { color: red; }
::highlight(c2) { color: orange; }
::highlight(c3) { color: magenta; }
::highlight(c4) { color: green; }
::highlight(c5) { color: teal; }
::highlight(c6) { color: blue; }
::highlight(c7) { color: purple; }
.pa {
--offsetX: 80px;
--bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/24/6a3ba87c29ada.gif') no-repeat center/cover;
--ma-size: 5%;
width: 1300px;
height: 731px;
position: relative;
overflow: hidden;
}
.pa *, .pa *::before, .pa *::after {
content: none !important;
}
/* 歌词容器 */
#custom-lrc-container {
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
text-align: center;
z-index: 9999;
pointer-events: none;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* 歌词样式 - 描边改为白色 */
.lrc-line {
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
color: #fefefe;
font-size: 28px;
font-family: "方正兰亭粗黑_GBK", "LiSu", serif;
font-weight: bold; /* 字体加粗 */
/* 原黑色描边 → 改为白色描边 */
text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, 0 0 12px rgba(255,255,255,0.9);
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
margin: 0;
top: 0;
}
.lrc-line.active {
opacity: 1;
transform: translateX(-50%) scale(1.1);
z-index: 10;
}
</style>
<div class="pa">
<div id="custom-lrc-container"></div>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', { src: 'https://od.lk/s/NDNfNDY5MTY5MTVf/%E5%90%AC%E4%B8%80%E6%9B%B2%E3%80%8A%E5%B8%8C%E6%9C%9B%E5%A4%8F%E5%A4%A9%E7%9A%84%E9%A3%8E%E5%90%B9%E6%9D%A5%E5%A5%BD%E6%B6%88%E6%81%AF%E3%80%8B%EF%BC%81.mp3' });
tz.add('video', '', 'pd-vid', {src: 'http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4'}).style('opacity: 0.2;');
tz.add('img', '', 'ma', {
src: 'https://ff.xiaoqiaodali.top:5401/i/2026/06/24/6a3ba8abb0298.gif'
})
.style('right: 40px; bottom: 70px;')
.playmp3();
tz.bgprog().style('bottom: 8px; color: #fefefe; width: 400px;');
tz.fs().style('left: 20px; top: 20px;');
const lrcString = `
希望夏天的风吹来好消息
演唱：江念念/音乐山
希望夏天的风吹来好消息
吹散所有烦恼委屈和叹息
日子慢慢升温事事都顺意
往后岁岁年年平安又欢喜
枝头花开满庭暖阳落心底
走过人间烟火平凡也珍惜
抛开心头愁绪放宽小脾气
静待美好奔赴慢慢奔向你
晚霞染遍天际晚风轻轻起
放下奔波忙碌好好做自己
所有付出努力都不会孤寂
好运如约而至岁岁皆顺意
希望夏天的风吹来好消息
吹散所有烦恼委屈和叹息
日子慢慢升温事事都顺意
往后岁岁年年平安又欢喜
晚风温柔吹起万事皆如意
年年岁岁安好幸福不缺席
`;
// 注册七彩高亮
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);
});
// 给单个元素上色
function colorizeText(element) {
const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
let node;
while (node = walker.nextNode()) {
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);
}
}
}
function initCustomLrc(lrcText) {
const container = document.getElementById('custom-lrc-container');
const lines = [];
const lineRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/;
const rawLines = lrcText.split('\n');
rawLines.forEach(text => {
const match = text.match(lineRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const milliseconds = parseInt(match);
const time = minutes * 60 + seconds + milliseconds / 1000;
let content = match.trim();
content = content.replace(/&#\d+;/g, '').trim();
if (content) {
lines.push({ time, content, element: null });
}
}
});
lines.forEach((line) => {
const div = document.createElement('div');
div.className = 'lrc-line';
div.textContent = line.content;
container.appendChild(div);
line.element = div;
// 给这句歌词上色
colorizeText(div);
});
const audio = document.querySelector('.pa audio');
if (audio) {
audio.addEventListener('timeupdate', () => {
const currentTime = audio.currentTime;
let activeIndex = -1;
for (let i = 0; i < lines.length; i++) {
if (currentTime >= lines.time) {
activeIndex = i;
} else {
break;
}
}
lines.forEach((line, idx) => {
if (idx === activeIndex) {
line.element.classList.add('active');
} else {
line.element.classList.remove('active');
}
});
});
audio.addEventListener('ended', () => {
lines.forEach(line => line.element.classList.remove('active'));
});
}
}
setTimeout(() => {
const audioEl = document.querySelector('.pa audio');
if(audioEl) {
initCustomLrc(lrcString);
} else {
const observer = new MutationObserver(() => {
const aud = document.querySelector('.pa audio');
if(aud) {
initCustomLrc(lrcString);
observer.disconnect();
}
});
observer.observe(document.querySelector('.pa'), { childList: true, subtree: true });
}
}, 500);
</script> 本帖最后由 霜染枫丹 于 2026-6-24 18:54 编辑
感谢也曾年轻分享的扑克牌动图，小播采用了桃心，特别喜欢！
https://imgimg.qqdsw8.cn/view.php/c318b30727c183b113eb163f5d0e2800.gif
希望夏天的风吹来好消息
演唱：江念念/音乐山
希望夏天的风吹来好消息
吹散所有烦恼委屈和叹息
日子慢慢升温事事都顺意
往后岁岁年年平安又欢喜
枝头花开满庭暖阳落心底
走过人间烟火平凡也珍惜
抛开心头愁绪放宽小脾气
静待美好奔赴慢慢奔向你
晚霞染遍天际晚风轻轻起
放下奔波忙碌好好做自己
所有付出努力都不会孤寂
好运如约而至岁岁皆顺意
希望夏天的风吹来好消息
吹散所有烦恼委屈和叹息
日子慢慢升温事事都顺意
往后岁岁年年平安又欢喜
晚风温柔吹起万事皆如意
年年岁岁安好幸福不缺席
漂亮的彩色歌词和变色小播，帖子视频也很漂亮。
欣赏枫丹好帖{:4_187:} 美丽的画面配上优美的歌曲，充分展现了夏天的意境。 夏天的风吹来好帖子，谢谢枫丹老师精彩分享{:4_204:} 红影 发表于 2026-6-24 20:23
漂亮的彩色歌词和变色小播，帖子视频也很漂亮。
欣赏枫丹好帖
红影晚上好~~这组扑克图做小播都能好看，是也曾年轻找到贴上来的。感谢红影支持。晚安！{:4_204:}{:4_190:}
梦油 发表于 2026-6-24 20:38
美丽的画面配上优美的歌曲，充分展现了夏天的意境。
现在AI填补了素材的不足，也是有幸赶上来好时候，可以这样玩，谢您支持，晚安！{:4_204:}{:4_190:}
杨帆 发表于 2026-6-24 22:28
夏天的风吹来好帖子，谢谢枫丹老师精彩分享
感谢扬帆的一贯鼓励支持，很荣幸！晚安~~{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-6-25 01:10
现在AI填补了素材的不足，也是有幸赶上来好时候，可以这样玩，谢您支持，晚安！
你这个年龄还玩的这么好真不容易，你太聪明了。 梦油 发表于 2026-6-25 16:43
你这个年龄还玩的这么好真不容易，你太聪明了。
谢马老鼓励！贪玩是最大的动力，然后就是用时间换空间。这不像马老师的那些代码，是创造，我这是使用，想玩就能会。{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-6-25 01:08
红影晚上好~~这组扑克图做小播都能好看，是也曾年轻找到贴上来的。感谢红影支持。晚安！{:4_190 ...
是的，感觉都挺好。
页:
[1]