醉美水芙蓉 发表于 2026-5-22 20:41:06

潇洒醉风行

<meta charset="utf-8"><style>
#papa { margin: 130px 0 20px calc(50% - 781px); width: 1400px; height: 850px; 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/151184.mp3" autoplay loop preload="auto"></audio>
<video class="vid" src="http://cccimg.com/view.php/30d85f08f6e84acaa27e7201a2f69eba.mp4" poster="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/61ca0c390d900f36dd00cd383d9f45d7_preview.webp"></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 = `口水歌永兴 - 潇洒醉风行
LRC编辑：醉美水芙蓉
一杯烈酒灌下喉
不问是非不问缘由
街角晚风扯着衣袖
醉意漫过心头
潇洒一回 不后悔
洒脱如风 不惧累
一声狂笑 全世界奉陪
随性自在 星辰作陪
谁说人生非要争斗
我只要一场痛快自由
脚步在夜色里肆意游走
管它明天 什么追逐
月亮摇啊摇
影子飘啊飘
心事都醉倒
我用古筝拨动心弦
用笛声吹散苦与甜
喉咙沙哑唱破长天
谁管什么输赢 什么体面
醉过才知人间滚烫
疯过才懂心之所向
不必假装 不必勉强
这一趟 就该活得张扬
月亮摇啊摇
影子飘啊飘
随我一起闹
一杯烈酒再入喉
往事都随风远走
不问归途 不问以后
今夜只做 最真的我
谢谢欣赏！
`;
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>

klxf 发表于 2026-5-22 21:50:39

本帖最后由 klxf 于 2026-5-22 21:51 编辑

好听好看，效果漂亮，谢谢友友精彩分享

月明工作室 发表于 2026-5-23 20:17:33

欣赏芙蓉老师精彩分享！

醉美水芙蓉 发表于 2026-5-23 20:53:27

klxf 发表于 2026-5-22 21:50
好听好看，效果漂亮，谢谢友友精彩分享

谢谢友友光临！

醉美水芙蓉 发表于 2026-5-23 20:53:40

月明工作室 发表于 2026-5-23 20:17
欣赏芙蓉老师精彩分享！

谢谢老师光临！
页: [1]
查看完整版本: 潇洒醉风行