苦乐自渡
本帖最后由 杨帆 于 2026-4-30 19:48 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.cn/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
<title>苦乐自渡</title>
<style>
#papa { margin: 130px 0 20px calc(50% - 781px); width: 1400px; height: 780px; background: lightblue; box-shadow: 3px 3px 6px gray; z-index: 1; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative;--state: running; border-radius:32px;}
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.vid:nth-of-type(2) { opacity:0.6;mix-blend-mode: screen;mask: linear-gradient(to right top, red 60%, transparent 80%);-webkit-mask: linear-gradient(to right top, red 60%, transparent 80%); }
.vid:nth-of-type(3) {width: 100px; height: 100px;left:20px; top: 20px; cursor: pointer;animation: starfish-rotate 4s linear infinite var(--state);transform-origin: center;transform-style: preserve-3d;transform: rotateX(45deg) rotateY(-15deg) rotateZ(0deg);transition: transform 0.3s ease; cursor:pointer;z-index: 1;}
.vid:nth-of-type(4) { opacity:0.8;mix-blend-mode: screen;mask: linear-gradient(to right top, red 60%, transparent 80%);-webkit-mask: linear-gradient(to right top, red 60%, transparent 80%);}
#wrapper{position:absolute; white-space: nowrap;padding:2%;font:bold 2.6rem/1.2 "Ma Shan Zheng",STXingkai;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:88px;z-index:5;}
.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;width:600px; top:95%;left:50%;transform:translate(-50%);z-index:60;color:#ffffff;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:25px;width:100%;text-align-last:justify;}
#mprog{width:100%;height:2px;accent-color:lightgreen;outline:none;cursor:pointer;}
#btnplay{position:absolute;width:60px;height:60px;margin: -60px auto;left:50%;transform:translate(-50%);cursor:pointer;animation:rotating 6s infinite linear var(--state);border-radius:50px;}
@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:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:8;}
#fullscreen:hover{font-style:italic;}
#sb { transform-origin: 25px 25px; }
#msvg {position: absolute;width: 120px;height: 120px;left: 20px;bottom: 20px;z-index: 9;cursor: pointer;animation: starfish-rotate 3s linear infinite var(--state);transform-origin: center;transform-style: preserve-3d;transform: rotateX(45deg) rotateY(-15deg) rotateZ(0deg);transition: transform 0.3s ease;}
.video-time {position: absolute;left: 35px;top: 55px;color: white;padding: 4px 8px;border-radius: 12px;font-size: 14px;pointer-events: none;z-index: 2;}
@keyframes starfish-rotate {to {transform: rotateX(45deg) rotateY(-15deg) rotateZ(360deg);}}
</style>
</head>
<body>
<div id="papa">
<div class="video-time" id="videoTime">- 00:00</div>
<div id="wrapper"></div>
<div id="mplayer" data-tt="00:0000:00">
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" />
<img id="btnplay" style="-webkit-mask-image:radial-gradient(circle,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 75%);mask-image:radial-gradient(circle,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 65%);"src="https://bbs.cnzv.cc/up/upload/pic/62/20251114-1fab01d130c58aee5aeba5274d9e0907.png" title="播放/暂停" alt=""></div>
<span id="fullscreen">全屏欣赏</span>
<audio id="audio" src="https://www.joy127.com/url/149224.mp3" autoplay loop preload="auto"></audio>
<video class="vid" src="http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4" poster="https://cccimg.com/view.php/9e10d3ea1a5836243bc2316f24d94f4f.jpg"></video>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay loop muted playsinline></video>
<video class="vid" id="vplayer" data-tt="00:00 / 00:00" src="http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4" poster="https://638183.freep.cn/638183/small/780.webp" title="播放/暂停"></video>
<video class="vid" src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4" autoplay loop muted playsinline></video>
<svg id="msvg" class="player rot" viewBox="-100 -100 200 200">
<title>播放/暂停</title>
<symbol id="sb" viewBox="-100 -100 200 200"></symbol>
</svg>
</div>
<script>
const papa = document.getElementById('papa');
const audio = document.getElementById('audio');
const wrapper = document.getElementById('wrapper');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
const btnplay = document.getElementById('btnplay');
const fullscreen = document.getElementById('fullscreen');
const vplayer = document.getElementById('vplayer');
const msvg = document.getElementById('msvg');
const sb = document.getElementById('sb');
const gc = `
苦乐自渡
走过了风雨 尝过了酸楚
才懂这人生 有甜也有苦
繁华和落寞 谁也留不住
悲欢离合 终究要落幕
受过了委屈 走过了弯路
慢慢才明白 凡事靠自渡
不必去抱怨 不必去倾诉
默默扛起 生活的包袱
人生苦乐要自渡
悲欢离合自己悟
再难的路 不认输
心中有光 就不孤独
人生苦乐要自渡
起起落落是归宿
心怀善良 踏平坎坷
笑着走完 这一段旅途
人生这趟 单行路
苦乐悲欢 皆自渡
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
audio.ontimeupdate = () => {
if(curkey >= gcAr.length) return;
if(audio.currentTime >= gcAr) {
const gap = gcAr?. - gcAr || 2000;
showLrc(gcAr, wrapper, gap);
}
};
audio.onended = () => {
curkey = 0;
};
audio.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
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) / 100;
lrcAr.push(.trim()]);
}
});
return lrcAr.length ? lrcAr : [];
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (audio.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
curkey = Math.max(0, Math.min(curkey, gcAr.length - 1));
let time = gcAr?. - gcAr || 2000;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('');
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.textContent = char;
span.classList.add('char');
const x = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 200;
const y = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 200;
span.style.cssText += `
color: hsl(${Math.random() * 360}, 100%, 60%);
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.4}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey++;
isSeeking = true;
setTimeout(() => isSeeking = false, time);
}
const vids = document.querySelectorAll('.vid');
var mState = () => {
papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
vids.forEach(vid => {
if(audio.paused){
vid.pause();
}else{
vid.play();
}
});
};
audio.addEventListener('canplay', mState);
audio.addEventListener('playing', mState);
audio.addEventListener('pause', 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);
min = min.toString().padStart(2, '0');
sec = sec.toString().padStart(2, '0');
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);
let remain = audio.duration - audio.currentTime;
document.getElementById('videoTime').textContent = '- ' + toMin(remain);
});
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.oninput = () =>audio.currentTime = mprog.value / mprog.max * audio.duration;
papa.oncontextmenu = (e) => e.preventDefault();
let fs = true;
fullscreen.onclick = () => {
if(fs){
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
let fsTimer,fyTimer,hhTimer;
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
clearTimeout(fyTimer);
vplayer.style.opacity = '1';
fyTimer = setTimeout(() => {
vplayer.style.opacity = '0';
}, 3000);
clearTimeout(hhTimer);
msvg.style.opacity = '1';
hhTimer = setTimeout(() => {
msvg.style.opacity = '0';
}, 3000);
});
btnplay.onclick = () => {
audio.paused ? audio.play() : audio.pause();
};
msvg.onclick = vplayer.onclick = () => btnplay.click();
function loadJs(url, callback) {
var script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', function(){
var dr = _dr('msvg');
dr.circle(0, 0, 90, 'white').addTo(sb);
dr.path('M0 0, 100 0', 'none','darkgreen', 4).addTo(sb).rotates(20, 360);
dr.use('#sb',30, 30, 50, 50).rotates(7);
dr.use('#sb', -25, -25, 50, 50).style('transform: scale(1.5)');
});
vplayer.onanimationiteration = () => vplayer.style.setProperty('filter',`hue-rotate(${30 + Math.random()*270}deg)`);
</script>
</body>
</html>
沙发欣赏杨帆的苦乐自渡的精彩音画。晚上好！{:4_187:} 画面感拉满，歌词哲理。赞！赞！{:4_204:} 还是三个小播都可以暂停的啊！太厉害了！{:4_199:} 梦江南 发表于 2026-4-30 19:44
还是三个小播都可以暂停的啊！太厉害了！
左下角小播来自马老师示范帖呦，谢谢马老师代码，谢谢江南鼓励{:4_204:} https://img0.baidu.com/it/u=7773141,225127062&fm=253&app=138&f=GIF?w=474&h=332 三个小播都能控制呢。这个帖子制作漂亮，场景很开阔。
欣赏杨帆好帖{:4_199:} 欣赏杨帆精彩的制作，联动按钮制作的漂亮{:4_187:} 也曾年轻 发表于 2026-4-30 19:55
谢谢年轻老师鼓励，祝五一快乐{:4_191:} 本帖最后由 杨帆 于 2026-4-30 22:40 编辑
红影 发表于 2026-4-30 20:39
三个小播都能控制呢。这个帖子制作漂亮，场景很开阔。
欣赏杨帆好帖
鼓捣着玩呢，谢谢鼓励，祝影子五一快乐{:4_204:} 小辣椒 发表于 2026-4-30 21:08
欣赏杨帆精彩的制作，联动按钮制作的漂亮
问好小辣椒，谢谢鼓励，祝五一快乐{:4_204:} 欣赏好帖，祝劳动节快乐！{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-4-30 22:40
欣赏好帖，祝劳动节快乐！
谢谢鼓励，祝枫丹老师五一快乐{:4_204:} 杨帆 发表于 2026-4-30 22:37
谢谢年轻老师鼓励，祝五一快乐
https://wx1.sinaimg.cn/mw690/b55dee1fly1hp9nn5jvuyg20hs0knwj4.gif 漂亮 马黑黑 发表于 2026-5-1 12:24
漂亮
谢谢马老师鼓励，祝五一快乐{:4_176:} 杨帆 发表于 2026-4-30 22:38
鼓捣着玩呢，谢谢鼓励，祝影子五一快乐
谢谢杨帆，五一节快乐{:4_187:}
页:
[1]