醉在这个冬
本帖最后由 杨帆 于 2025-12-29 22:05 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Top兄弟&方辰《醉在这个冬》</title>
</head>
<body>
<style>
#papa{margin: 30px 0;left: calc(50% - 81px);transform: translateX(-50%);background: #3F5EFB url("https://s3.bmp.ovh/imgs/2025/12/29/77be23ff5d32deda.jpg") no-repeat center/cover;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 #006000; overflow: hidden; position: relative; display: grid; place-items: center; user-drag: none; user-select: none; --state:running;z-index:1;}
#papa::before { position: absolute; content: url('https://s3.bmp.ovh/imgs/2025/12/29/d291d868cc851d41.png'); scale: .2; opacity: 0;transition: 1.8s;}
#papa:hover::before { opacity: 1; scale: 1.3;display:var(--display); }
#vid {position: absolute;inset:0;left:-20%; top:-20%;width: 140%;height:140%; object-fit: cover;pointer-events: none;opacity: .5;mix-blend-mode: screen;mask: linear-gradient(to bottom, red 30% ,transparent 51%,transparent);
-webkit-mask: linear-gradient(to bottom, red 30% ,transparent 51%,transparent);
object-position:center;}
.vid {position: absolute;inset:0;left:-20%; top:-20%;width: 140%;height:140%;object-fit: cover;pointer-events: none;opacity: .9;mix-blend-mode: overlay;object-position:center;mix-blend-mode: screen;}
#mdiv {position: absolute;top:50px;right:50px;z-index:10;width: 80px;height:80px;display: grid; place-items: center; filter: drop-shadow(0 0 1px #8A2BE2);animation: rot 3s linear infinite var(--state);transition:opacity 0.3s; cursor: pointer;pointer-events: auto;}
#mdiv:hover{ animation-play-state:paused !important; }
#mdiv > span {position: absolute;top:50%left:50%;width: 50%; height: 50%; background: linear-gradient(75deg,#FAFAD2 1%,#7CFC00,#ADFF2F,#32CD32, #FFD700);border-radius: 100% 0;transform: rotate(var(--deg)) translate(21.5px,-50%); }
#mdiv > span:nth-of-type(1) { --deg: 0deg; }
#mdiv > span:nth-of-type(2) {--deg: 72deg;}
#mdiv > span:nth-of-type(3) { --deg: 144deg;}
#mdiv > span:nth-of-type(4) {--deg: 216deg;}
#mdiv > span:nth-of-type(5) {--deg: 288deg;}
@keyframes rot { to { transform: rotate(1turn); } }
#mdiv:hover { filter: unset !important; }
#fullscreen { position: absolute; top: 30px;left: 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; }
#lrc { --state:running; --motion: cover2; --tt: 2s; --bg: linear-gradient(45deg, #ff0000, #ff6600, #ffff00); position: absolute; z-index: 6;right: 3%; top: 25%; transform: translateX(-50%); font: normal 2.8em 华文新魏; font-weight: 400; color:#8A2BE2; white-space: pre; writing-mode: vertical-lr; background-clip: text;-webkit-background-clip: text; filter: drop-shadow(#FFFFFF 1px 0 0) drop-shadow(#FFFFFF 0 1px 0) drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0); --rect:0 0 100% 0;--border:0 1px 0 0;--c2:#F5F5F5;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;animation-play-state: var(--state); background: var(--bg); clip-path: inset(0 0 100% 0); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state);clip-path:inset(var(--rect));border:0px groove var(--c2);border-width:var(--border);}
@keyframes cover1 { to { clip-path: inset(0 0 0 0); } } @keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
.dancer{position: absolute;mix-blend-mode:screen;width: 250px; height: 120px; right: 1%; bottom:1%; opacity:1; z-index: 8;cursor: pointer;display:var(--display); transition: .3s;rotate:-5deg;animation: flash 0.5s infinite alternate, shake 1s infinite;}
#prog { position: absolute;left:30%;bottom: 5%; z-index: 18;filter:invert(100%)hue-rotate(300deg);background: #3F5EFB;width: 40%;height: 5px;cursor: pointer;pointer-events: auto;display:var(--display);}
#tmsg { position: absolute;right:22%;bottom: 5%;z-index: 8;font: normal 13px sans-serif;color: #fff;display:var(--display);}
#ptxt{ position: absolute;left:25%;bottom:5%; z-index: 8;font: normal 13px sans-serif;color: #fff;display:var(--display);}
@keyframes shake {from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes flash { to { filter: hue-rotate(360deg); } }
</style>
<div id="papa">
<progress id ="prog"></progress>
<div id="ptxt">0%</div>
<div id="tmsg">00:00|00:00</div>
<div id="img-border" ></div>
<div data-lrc="" id="lrc"></div>
<span id="fullscreen">全屏欣赏</span>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/11329da50cd973e2bf4d21c6c6f467f3_preview.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b977d9e77.mp4" autoplay loop muted></video>
<img class="dancer" src="https://s3.bmp.ovh/imgs/2025/12/29/35ae6387f7b5758c.gif" alt="" / title = '暂停'; >
<div id="mdiv" title = '暂停';>
<span></span> <span></span> <span></span> <span></span> <span></span></div>
<audio id="aud" src="https://www.joy127.com/url/140740.mp3" autoplay loop></audio></div>
<script>
const mdiv = document.getElementById('mdiv');
const aud = document.getElementById('aud');
const vids = document.querySelectorAll(', .vid');
const fullscreen = document.getElementById('fullscreen');
const papa = document.getElementById('papa');
const lrc = document.getElementById('lrc');
const dancer = document.querySelectorAll('.dancer');
mdiv.onclick = () => {
if (aud.paused) {
aud.play();
vids.forEach(vid => vid.play());
dancer.forEach(item=> {item.style.setProperty('--display', '');});
papa.style.setProperty('--display', '');
mdiv.style.animationPlayState = 'running';
lrc.style.setProperty('--state', 'running');
} else {
aud.pause();
vids.forEach(vid => vid.pause());
dancer.forEach(item=> {item.style.setProperty('--display', 'none');});
papa.style.setProperty('--display', 'none');
mdiv.style.animationPlayState = 'paused';
lrc.style.setProperty('--state', 'paused');
}
mdiv.title = aud.paused ? '播放' : '暂停';
dancer.forEach(item => {
item.title = '暂停';
});
};
dancer.forEach(item => {
item.onclick = () => mdiv.click();
});
(function() {
const lrcStr = `
词：五条悟
曲：五条悟
出品：龙小晨@有点意思
Top兄弟&方辰《醉在这个冬》
酒杯酒杯才懂我
装下我所有寂寞
为你流的泪那么多
为何还是舍不得
雪花片片的飘落
像在代替我难过
对你动心又死心了
最终成为了过客
今夜又刮起想你的风
让我醉在这个冬
求你别出现在我的梦
把我伤得那么重
今夜又刮起想你的风
吹得我眼泪朦胧
若离别后不会再重逢
当初就不该相拥
酒杯酒杯才懂我
装下我所有寂寞
为你流的泪那么多
为何还是舍不得
雪花片片的飘落
像在代替我难过
对你动心又死心了
最终成为了过客
今夜又刮起想你的风
让我醉在这个冬
求你别出现在我的梦
把我伤得那么重
今夜又刮起想你的风
吹得我眼泪朦胧
若离别后不会再重逢
当初就不该相拥
`;
let mKey = 0;
let mFlag = true;
const averAdd = 0.3;
let lrcAr = [];
const lrcTime = (ar) => {
const tmpAr = [];
for (let j = 0; j < ar.length; j++) {
if (j < ar.length - 1) {
tmpAr = parseFloat((ar - ar).toFixed(1));
} else {
const avg = tmpAr.reduce((a, b) => a + b) / tmpAr.length;
tmpAr = parseFloat(avg.toFixed(1));
}
}
tmpAr.forEach((item, key) => {
ar = item;
});
return ar;
};
const getLrcAr = (text) => {
const arr = [];
const calcRule = ;
const lines = text.split('\n');
lines.forEach(line => {
const geci = line.replace(/\d+[\.:]\d+([\.:]\d+)?/g, '').replace(/[\[\]\'\"\t,]s?/g, '').trim();
if (!geci) return;
const timeMatch = line.match(/\d+[\.:]\d+([\.:]\d+)?/g);
if (!timeMatch) return;
timeMatch.forEach(timeStr => {
const timeArr = timeStr.match(/\d+/g);
let sec = 0;
timeArr.forEach((val, idx) => {
sec += val * calcRule;
});
arr.push();
});
});
arr.sort((a, b) => a - b);
return lrcTime(arr);
};
const showLrc = (time) => {
if (mKey >= lrcAr.length) mKey = 0;
const name = mFlag ? 'cover1' : 'cover2';
lrc.innerText = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mKey++;
mFlag = !mFlag;
};
const calcKey = () => {
for (let j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey >= lrcAr.length) mKey = lrcAr.length - 1;
const time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
lrcAr = getLrcAr(lrcStr);
aud.addEventListener('timeupdate', () => {
if (aud.paused) return;
for (let j = mKey; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr && mKey === j) {
showLrc(lrcAr);
break;
}
if (mKey >= lrcAr.length) {
mKey = 0;
}
}
});
aud.addEventListener('pause', () => {
lrc.style.setProperty('--state', 'paused');
});
aud.addEventListener('play', () => {
lrc.style.setProperty('--state', 'running');
});
aud.addEventListener('seeked', calcKey);
showLrc(lrcAr);
})();
let fs = true;
let fsTimer;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
});
mdiv.onanimationiteration = () =>mdiv.style.setProperty('filter', `hue-rotate(${45 + Math.random() * 120}deg)`);
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
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 = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
aud.addEventListener("timeupdate",function(){
var percent= aud.currentTime / aud.duration
var sp = 600 / 100 ;
var swidth =(percent * 100 * sp) + "px";
console.log(percent*100,swidth)
document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
})
</script>
</body>
</html> 很好听的歌，第一次听，制作漂亮！欣赏学习！{:4_204:}{:4_190:}
满天的大雪，好听的歌，小播漂亮，制作精美。欣赏点赞！{:4_187:} 霜染枫丹 发表于 2025-12-29 21:41
很好听的歌，第一次听，制作漂亮！欣赏学习！
刚听到的一首歌，分享一下，谢谢枫丹鼓励{:4_204:} 梦江南 发表于 2025-12-30 07:26
满天的大雪，好听的歌，小播漂亮，制作精美。欣赏点赞！
问好江南，刚听到的，谢谢鼓励{:4_204:} 这个有意思，暂停就让所有动图都隐去了，这样也好，就不用管它是否停止了{:4_173:}
制作很漂亮，尤其视频，在上半部移动，很适合回忆的场景{:4_187:} 杨帆的制作很漂亮，很赞{:4_199:} 红影 发表于 2025-12-30 19:48
杨帆的制作很漂亮，很赞
谢谢影子鼓励，祝新年快乐，马年大吉{:4_204:}
页:
[1]