《风轻云淡》（空镜头 彩字歌词）
本帖最后由 霜染枫丹 于 2026-6-8 23:52 编辑 <br /><br /><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/07/6a256ecb4ddc7.gif') no-repeat center/cover;
--ma-size: 4%;
width: 1300px;
height: 731px;
position: relative;
overflow: hidden;
}
.pa *, .pa *::before, .pa *::after {
content: none !important;
}
/* 歌词容器 */
#custom-lrc-container {
position: absolute;
bottom: 20px;
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: 32px;
font-family: "黑体", "LiSu", serif;
font-weight: normal;
text-shadow: 0 0 10px rgba(0,0,0,0.8);
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/NDNfNDY2NzI0MTZf/%E9%A3%8E%E8%BD%BB%E4%BA%91%E6%B7%A1%2C%E9%9F%B3.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/07/6a2551166381c.png'
})
.style('right: 80px; bottom: 100px;')
.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-7 21:56 编辑
风轻云淡(岁月如歌)
作词：风轻云淡
作曲：风轻云淡
统筹：橙橙Orange/祁言
出品人：Comey/何
出品团队：胖达工作室x 飞行工作室
走过了多少春秋
看过了多少风景
一路风来一路雨
都化作心中平静
前半生匆匆赶路
后半生慢慢清醒
不攀不比不纠结
守一份从容安宁
人生本是一场远行
不必事事都说明
花开有时落也轻
心若安然便是晴
舞一曲岁月静好
唱一段人间真情
健康平安最珍贵
简简单单过一生
风也轻来云也淡
日子慢慢心也宽
半生风雨半生暖
余生只愿常心安
人生本是一场远行
不必事事都说明
花开有时落也轻
心若安然便是晴
舞一曲岁月静好
唱一段人间真情
健康平安最珍贵
简简单单过一生
舞一曲岁月静好
唱一段人间真情
健康平安最珍贵
简简单单过一生
https://5b0988e595225.cdn.sohucs.com/images/20200409/db39fb96f8534ea6a6583d3e35f6721e.gif 本帖最后由 霜染枫丹 于 2026-6-7 21:53 编辑
也曾年轻 发表于 2026-6-7 21:49
风轻云淡晚上好~~挺喜欢这首歌的平和洒脱。我新注册上传的歌曲，感觉还是挺好的。看来可用免费5G.
https://www.opendrive.com
{:4_204:}{:4_190:}
本帖最后由 霜染枫丹 于 2026-6-8 23:53 编辑 <br /><br /><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/07/6a256ecb4ddc7.gif') no-repeat center/cover;
--ma-size: 4%;
width: 1300px;
height: 731px;
position: relative;
overflow: hidden;
}
.pa *, .pa *::before, .pa *::after {
content: none !important;
}
/* 歌词容器 */
#custom-lrc-container {
position: absolute;
bottom: 20px;
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: 32px;
font-family: "黑体", "LiSu", serif;
font-weight: normal;
text-shadow: 0 0 10px rgba(0,0,0,0.8);
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/NDNfNDY2NzI0MTZf/%E9%A3%8E%E8%BD%BB%E4%BA%91%E6%B7%A1%2C%E9%9F%B3.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/07/6a2551166381c.png'
})
.style('right: 80px; bottom: 100px;')
.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> 这么多美丽的花儿啊，这制作真美。
欣赏枫丹好帖{:4_187:}
页:
[1]