寒冬残荷 发表于 2025-12-24 17:06

《痴情渡》


<meta charset="utf-8">
<style>
/* 云天-痴情渡*/
#pa{position:relative; margin:30px 0; left:calc(50% - 81px); transform:translateX(-50%);width:clamp(600px,90vw,1400px);min-height:80vh;aspect-ratio:16/9;border-radius:20px;box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;background:#000 url('https://pic1.imgdb.cn/item/694b886126657af64c6c8ed2.png')no-repeat center/cover;display:grid;place-items:center; user-drag: none; user-select: none;--state:running;}
.vid{position:absolute;inset:0;width:120%;height:120%;object-fit:cover;bottom:20%;pointer-events:none;object-position:center;mix-blend-mode: screen;z-index:2;opacity:0.8;}
.pTitle { width: 50%; height: 20%; line-height: 2em; color: transparent; font-family: STLiti, NSimSun, 'Microsoft YaHei'; font-size: 45px; font-weight: bold; text-align: center; margin: auto; z-index: 5; position: absolute; left: -5%; top: 5%; }
.pTitle span:nth-child(1) { animation-delay: 0s; }
.pTitle span:nth-child(2) { animation-delay: 0.5s; }
.pTitle span:nth-child(3) { animation-delay: 1.0s; }
.pTitle span:nth-child(4) { animation-delay: 1.5s; }
.pTitle span:nth-child(5) { animation-delay: 2.0s; }
.pTitle span:nth-child(6) { animation-delay: 2.5s; }
.pTitle span:nth-child(7) { animation-delay: 3.0s; }
.sp { animation: flashTitle 8s linear infinite var(--state); }
@keyframes flashTitle { 0%, 100% { color: white; text-shadow: 2px 2px 20px coral, 2px 2px 30px Green, 2px 2px 40px Green, 2px 2px 50px Green, 2px 2px 60px Green, 2px 2px 70px Green, 2px 2px 80px coral; } 50%, 90% { color: transparent; text-shadow: none; } }
@keyframes flashing { 0% { filter: brightness(.8); } 100% { filter: brightness(1.2); } }
#wrapper{position:absolute; white-space: nowrap; padding:1%; font:bold 2.6em/1.2 STXihei; filter:drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);bottom:5%; z-index:10;}
.char{display:inline-block;padding:0 4px;opacity:0;transform:translate(var(--x),var(--y));animation: fadeIn 1.5s var(--delay) forwards var(--state), flash 1s infinite alternate var(--state);}
@keyframes fadeIn{to{transform:translate(0,0);opacity:1;}}
@keyframes flash {to { filter: hue-rotate(360deg); }}
#mplayer{position:absolute;text-align:center;top:96%;transform:translate(-50%);left:50%;z-index:60;color:Azure;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:15px;width:100%;text-align-last:justify;}
#mprog{width:600px;height:2px; accent-color:darkgreen; outline:none;cursor:pointer;}
#play{position:absolute;width:100px;height:100px;left:-40%;top:65%;cursor:pointer;animation:rotating 6s infinite linear var(--state);margin:-90px 0px;border-radius:50px;opacity:0.3;}
#play:hover{filter: grayscale(30%) sepia(90%) contrast(120%);transition: filter 0.5s ease; opacity:1;}
@keyframes rotating{0%{transform:rotate(-90deg);}25%{transform:rotate(0deg);}50%{transform:rotate(90deg);}75%{transform:rotate(0deg);}100%{transform:rotate(-90deg);}}
#fullscreen{position:absolute; top:10px; left:20px; font:1.5em 楷体; color:Azure; text-shadow:0 0 3px #000; opacity:1; cursor:pointer; user-select:none; z-index:8;}
#fullscreen:hover{font-style:italic;}
</style>
<div id="pa">
<div id="mplayer" data-tt="00:00 00:00">
<svg id="play" width="120" height="120" viewBox="0 0 400 400"><title>播放/暂停</title></svg>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" /></div>
<span id="fullscreen">全屏欣赏</span>
<div class="pTitle">
<span class="sp">云</span>
<span class="sp">天 </span>
<span class="sp"> - </span>
<span class="sp">痴</span>
<span class="sp">情</span>
<span class="sp">渡 </span>
<span class="sp"></span>
</div>
<audio id="audio" src="https://www.dda5.com/plug/down.php?ac=mp3&id=ea6fbfe77a9d9035d934f9c6dcd654ce" loop autoplay></audio>
<div id="wrapper"></div>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" autoplay loop muted></video>
</div>

<script>
const pa = document.getElementById('pa');
const audio = document.getElementById('audio');
const wrapper = document.getElementById('wrapper');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
const play = document.getElementById('play');
const fullscreen = document.getElementById('fullscreen');
const gc = `
《痴情渡》
词曲：云天
演唱：云天
入尘世爱恨明灭皆是苦
在人间功名利禄一局赌
若是这三千烦恼佛不渡
心中哪长路漫漫归何处
忘江湖恩怨情仇终是误
太痴情执着一生满盘输
归青灯问佛走错哪一步
终究不该踏上这红尘路
斩断了相思缠绕皆虚无
却难舍回眸一刻泪满目
跪佛前问因果皆在命数
怎奈何凡心未泯终反复
情关本难闯总铭心刻骨
人已远空悲伤何必当初
求菩提悟缘灭晨钟暮鼓
不如携清风明月自在渡
谢谢欣赏！`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
audio.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(audio.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
audio.onended = () => {
curkey = 0;
audio.play();
}
audio.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 (audio.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, wrapper, 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 ? 400 : -400);
const y = Math.random() * (Math.random() > 0.5 ? 150 : -150);
span.style.cssText += `
color: #cccccc;
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
const vids = document.querySelectorAll(', .vid');
var mState = () => {
pa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
vids.forEach(vid => audio.paused ? vid.pause() : vid.play());
};
audio.oncanplay = audio.onplaying = audio.onpause = () => mState();
var mseek = false;
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = mprog.value / mprog.max * audio.duration;
let fs = true;let fsTimer;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',pa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());fs = !fs;};
pa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
});
document.addEventListener('fullscreenchange', () => {
fs = !document.fullscreenElement;fullscreen.innerText = fs ? '全屏欣赏' : '退出全屏';});
play.onclick = () => {
audio.paused ? audio.play() : audio.pause();
pa.style.setProperty('--state', audio.paused ? 'paused' : 'running');};
</script>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(play);
var d = 'M400.00 200.00,L75.30 356.37,L155.50 5.01,L380.19 286.78,L19.81 286.78,L244.50 5.01,L324.70 356.37,L0.00 200.00,L324.70 43.63,L244.50 394.99,L19.81 113.22,L380.19 113.22,L155.50 394.99,L75.30 43.63';
dr.path(d,'grey','Gold',5).set('fill-rule', 'evenodd');
dr.circle(200, 200, 5, 'none', 'Orange', 15)
dr.circle(200, 200, 50, 'none', 'PaleGreen', 3);
</script>


寒冬残荷 发表于 2025-12-24 17:07

聚合图床的网速也不行了。

红影 发表于 2025-12-24 21:53

制作漂亮，歌词很有修炼的感悟。欣赏寒冬残荷好帖{:4_199:}

偶然~ 发表于 2025-12-25 09:20

来欣赏精品佳作

偶然~ 发表于 2025-12-25 09:21

时光匆匆，人渐老
每天快乐，别烦恼
人生就是一场梦
醒来方知夕阳少
吃好，喝好，休息好
身体健康，才是宝
寒冬残荷早安吉祥！
页: [1]
查看完整版本: 《痴情渡》