寒冬残荷 发表于 2025-12-16 15:01

《花又期》



<style>
#pa{margin-top:30px; left:calc(50% - 81px); transform:translateX(-50%); background: #000 url('') no-repeat center/20% 20%; width:clamp(600px,90vw,1400px); min-height:80vh; aspect-ratio:16/9; border-radius:20px; box-shadow:0px 0px 0px 2px #000000, 0px 0px 15px 15px #ff0000; overflow:hidden; position: relative; display:grid; place-items:center; perspective:1000px; user-drag:none; user-select:none; --state:running; z-index:1; }
#bjtu {position:absolute; left:0%; top:0%; width:100%; height:100%; opacity:.7; display:var(--display); z-index:1;}
#vid {position:absolute; left:5%; top:5%; width: 100%; height:100%; object-fit:cover; mix-blend-mode:screen;mask: linear-gradient(to right top, red 0%,red 90%, transparent 90%,transparent); -webkit-mask:linear-gradient(to right top, red 0%, red 90%, transparent 90%,transparent); opacity:.9; pointer-events:none; transition: 1s; z-index: 2; }
#fullscreen {position:absolute; left:3%; top:40px; width:42px; height:42px; cursor:pointer; opacity:0; transition:opacity 0.3s ease; z-index:8; }
#pa:hover #fullscreen {opacity:1;}
#qping {width:42px; height:42px; position:absolute; background:url('https://pic1.imgdb.cn/item/6940e1b60dd29e7e22418751.png')no-repeat center/cover; opacity:1; }
#tchu {width:42px; height:42px; position:absolute; opacity:0; background:url('https://pic1.imgdb.cn/item/6940e1fb0dd29e7e22418802.png')no-repeat center/cover; opacity: 1;}
.tup {position:absolute; opacity:0.5; right:0%; top:0%; width:15%; height:40%; z-index:3;}
#wenzi{position:absolute; left:7%; top:10%; width:400px; height:auto; font:bold 28px SimHei, NSimSun, 'Microsoft YaHei'; color:lightblue; line-height:48px; letter-spacing:2px; text-align:left; transform-style:preserve-3d; transform:rotateX(5deg) rotateY(-5deg) rotateZ(-16deg); perspective-origin:top left; transform-origin:center center 15px; z-index:10; --state:running;}
#mypic {position: absolute;right: 40px;bottom: 40px;width: 100px;height: 100px;cursor: pointer; animation: rot 5s linear infinite var(--state);z-index: 15;}
#mypic:hover {animation-play-state: paused; filter:brightness(2) hue-rotate(300deg); scale:1.2; }
@keyframes rot {to {transform:rotate(360deg); filter:hue-rotate(90deg); } }
#lrcgc {position:absolute; padding:0px; font:bold 50px/60px sans-serif; text-shadow: 1px 1px 1px gray; letter-spacing:4px; color: skyblue; white-space:pre; z-index: 12; -webkit-background-clip:text; filter:drop-shadow(#FFFFFF 2px 0 0) drop-shadow(#FFFFFF 0 2px 0) drop-shadow(#FFFFFF -2px 0 0) drop-shadow(#FFFFFF 0 -2px 0); width:100%; height: 70px; text-align:center; bottom:30px; left:0; border: 0px solid #000;}
</style>

<div id="pa">
<img id="bjtu" src="https://pic1.imgdb.cn/item/6940e21d0dd29e7e22418803.gif" alt="" >
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/42/5d2228836b4e9.mp4" autoplay loop muted oncontextmenu="return false"></video>
<span id="fullscreen" title="全屏/退出">
<div id="qping"></div>
<div id="tchu"></div>
</span>
<img class ="tup" src="https://pic1.imgdb.cn/item/6940ec260dd29e7e2241b478.jpg" alt="" >
<div id="wenzi"></div>
<img id="mypic" alt="" src="https://pic1.imgdb.cn/item/692d522dc2ca2fe15cef17c0.png" />
<div id="lrcgc">歌曲《花又期》</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1425175401"autoplay="autoplay" loop="loop"></audio>
</div>
<div style="height:208px;"></div>
<script language="javascript">
const wenzi = document.getElementById("wenzi");
const aud = document.getElementById("aud");
const mypic = document.getElementById("mypic");
var idx = 0;
var str = "——歌曲《花又期》——<br>歌曲《花又期》2019年4月22日发行。歌词以“花开花落”为核心意象，表达生命轮回、情感期盼与时光哲思。<br>前段时间热播的谍战片电视剧《沉默的荣耀》用《花又期》作为插曲，通过极富感染力的音乐语言，将《沉默的荣耀》中那份“于无声处听惊雷”的震撼，化作了“于花期中见永恒”的悠长回响。……";
var textTimer = setInterval(() => {
wenzi.innerHTML = str.substring(0, idx) + "|";
idx += 1;
if(idx > str.length) idx = 0;
}, 200);
mypic.onclick = () => {
aud.paused ? (aud.play(), vid.play()): (aud.pause(), vid.pause());
mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mypic.title = aud.paused ? '播放' : '暂停';
if (aud.paused) {
clearInterval(textTimer);
bjtu.style.setProperty('--display', 'none');
} else {
bjtu.style.setProperty('--display', '');
clearInterval(textTimer);
textTimer = setInterval(() => {
wenzi.innerHTML = str.substring(0, idx) + "|";
idx++;
if (idx > str.length) idx = 0;
}, 400);
}
};
mypic.title = '暂停'; let fs = true;let fsTimer;
fullscreen.onclick = () => {fs ? (pa.requestFullscreen(), qping.style.opacity = '0', tchu.style.opacity = '1') : (document.exitFullscreen(), qping.style.opacity = '1', tchu.style.opacity = '0');fs = !fs;}
pa.addEventListener('mousemove', () => { clearTimeout(fsTimer); fullscreen.style.opacity = '1'; fsTimer = setTimeout(() => { fullscreen.style.opacity = '0'; }, 3000); });
</script>
<script>
const gc = `《花又期》\n作词：肖慧峰\n作曲：裘怡玲\n演唱：刘哲军\n花又开 香飘逸\n灵空那长句\n春风吹这花语\n那堪吟风更迷离\n似飘渺蹉跎又期\n谁心里花满地\n又如何该如何\n流淌瑟瑟凉意\n西风低帘卷起\n我该去哪里\n那山那水那烟雨\n宣纸上几多别离\n花又开几留意\n我和你情几许\n花又期又盼你\n像雾像雨在哪里\n。。。。。。\n似飘渺 蹉跎又期\n谁心里花满地\n又如何该如何\n流淌瑟瑟凉意\n西风低帘卷起\n我该去哪里\n那山那水那烟雨\n宣纸上几多别离\n花又开几留意\n我和你情几许\n花又期又盼你\n像雾像雨在哪里\n像雾像雨在哪里\n谢谢观看`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, lrcgc, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, lrcgc, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(16).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>

也曾年轻 发表于 2025-12-16 15:48

欣赏美帖

红影 发表于 2025-12-16 20:54

漂亮的花朵和文字的动态效果。
原来这首歌是《沉默的荣耀》里的插曲，好听{:4_187:}

红影 发表于 2025-12-16 20:59

歌词同步和小播也漂亮，这个帖子真美。
欣赏寒冬残荷好帖{:4_199:}
页: [1]
查看完整版本: 《花又期》