潮湿的心（第二版）
本帖最后由 杨帆 于 2025-11-16 17:22 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>潮湿的心</title>
</head>
<body>
<style>
#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/939ab19eefec994600f8818b05380401.jpg') no-repeat center/cover; box-shadow: 0 0 8px 0 #000; position: relative; overflow: hidden; display: grid; place-items: center; user-select: none; z-index: 1; }
#vid2 { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none;mask: linear-gradient(to right top, red 0%, red 80%,transparent 90%);-webkit-mask: linear-gradient(to right top, red 0%,red 80%,transparent 90%); z-index: 5; left: 0%; }
li-zi { position: absolute; width: 6px; height: 12px; border-radius: 100% 60%; z-index: 10; }
@keyframes moving { from { opacity: .0; transform: rotate(00) translate(0,0); } to { opacity: 1; transform: rotate(var(--deg)) translate(var(--x0),var(--y0)); } }
#player { position: absolute; right: 1%; top: 2%; width: 150px; height: 150px; border-radius: 50%; cursor: pointer; background: url('https://bbs.cnzv.cc/up/upload/pic/62/20251114-1fab01d130c58aee5aeba5274d9e0907.png') no-repeat center/cover; transform-origin: 50% 50%; transition: transform 1s; animation: rotating 3s linear infinite var(--state); z-index: 10; }
@keyframes rotating { to { transform: rotate(-360deg); } }
#vid { position: absolute; width: 30%; height: 30%; right: -5%; top: 68%; border-radius: 2%; opacity: .96; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 1; }
#tmsg { position: absolute; z-index: 10; font: normal 14px sans-serif; color: #fff; top: 10%; right: 3.3%; }
</style>
<div id="papa">
<div id="player" title="播放/暂停"></div>
<div id="tmsg">00:00|00:00</div>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/35/15/63086e0d3cf27.mp4" autoplay loop muted=""></video>
<video id="vid2" src="https://file.uhsea.com/2507/f66b8a6fea0b99ceca7d849a9042bf52LQ.mp4" autoplay loop muted></video>
<audio id="aud" src="https://file.uhsea.com/2507/95957b20734c06f10f084121e7b41b7aP1.mp3" autoplay loop></audio>
</div>
<script>
(function(){
let all=180;
for(let i=0;i<all;i++){
let movBall=document.createElement('li-zi');
movBall.style.cssText+=`--x0:-600px;--y0:-700px;--deg:${Math.random()*105}deg;left:600px;bottom:0px;background:linear-gradient(to left,rgba(135,206,250,.8),rgba(225,225,225,.15));animation:moving ${Math.random()*10+10}s -${Math.random()*120}s infinite var(--state);`;
papa.prepend(movBall);
}
let playMusic=()=>aud.paused?(aud.play(),vid.play(),vid2.play(),player.title='暂停'):(aud.pause(),vid.pause(),vid2.pause(),player.title='播放');
let mState=()=>papa.style.setProperty('--state',aud.paused?'paused':'running');
player.addEventListener('click',playMusic,false);
aud.addEventListener('play',mState,false);
aud.addEventListener('pause',mState,false);
})();
aud.addEventListener('timeupdate',()=>{
tmsg.innerText=toMin(aud.currentTime)+' | '+toMin(aud.duration);
});
function toMin(val){
if(!val)return'00:00';
val=Math.floor(val);
let min=parseInt(val/60);
let sec = val % 60;
if(min<10)min='0'+min;
if(sec<10)sec='0'+sec;
return min+':'+sec;
}
</script>
</body>
</html>
好漂亮的播放器，谢谢杨帆朋友的精彩分享。{:4_187:} 梦江南 发表于 2025-7-2 14:02
好漂亮的播放器，谢谢杨帆朋友的精彩分享。
问好江南朋友，鼓捣着玩呢，谢谢鼓励{:4_204:} 这舞蹈视频好看，热热闹闹的，看得人热血沸腾{:4_187:} 播放器和歌词同步也做得好。欣赏杨帆好帖{:4_199:} 红影 发表于 2025-7-2 18:47
这舞蹈视频好看，热热闹闹的，看得人热血沸腾
呵呵，谢谢影子鼓励，嗨起来，开心每一天{:4_205:} 杨帆 发表于 2025-7-2 19:20
呵呵，谢谢影子鼓励，嗨起来，开心每一天
喜欢这样的帖子，感谢杨帆好帖{:4_187:}
页:
[1]