饮尽岁月一壶酒

杨帆发表于 2026-8-28 11:58

本帖最后由杨帆于 2026-8-28 12:04 编辑 <br /><br /><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<title>饮尽岁月一壶酒</title>
<style>
#papa{position:relative;display:grid;place-items:center;margin:30px 0;width:1280px;height:750px;left:calc(50% - 81px);transform:translateX(-50%);box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;font-family:"Ma Shan Zheng", "悟空大体库","SimHei", "Arial", "sans-serif";--state:running;background: #000 url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2026/1/bj.png') no-repeat center/cover;}
#mutedbnt{position:absolute;z-index:40;width:50px;height:50px;top:40%;left:47%;cursor:pointer;object-fit:contain;}
:fullscreen #control{top:calc(5% + 85px);left:calc(25% + 55px);}
:-webkit-full-screen #control{top:calc(5% + 85px);left:calc(25% + 55px);}
#c{position:absolute;top:calc(75% - 200px);left:calc(12% - 200px);background:transparent;border-radius:50%;transform:translateZ(0);z-index:1;pointer-events:none;}
.vid1,.vid2{position:absolute;z-index:1;pointer-events:none;object-fit:cover;object-position:center;}
.vid1{left:-10%;top:-10%;width:120%;height:120%;mix-blend-mode:screen;opacity:0.88;mask:linear-gradient(to bottom,red 10%,transparent 40%);-webkit-mask:linear-gradient(to bottom,red 10%,transparent 40%);}
.vid2{left:0%;top:0%;width:100%;height:100%;mix-blend-mode:screen;mask:linear-gradient(to bottom,transparent 35%,red 60%);-webkit-mask:linear-gradient(to bottom,transparent 35%,red 60%);}
#statusDisplay{position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:50%;top:55%;transform:translate(-50%,-50%);text-align:center;color:#8A2BE2;}
#papa:hover #fullscreen{position:absolute;left:25px;top:25px;color:DarkGray;font-size:25px;border:none;background:transparent;padding:4px 8px;border-radius:4px;z-index:88;cursor:pointer;transition:opacity 0.3s;}
#fullscreen:hover{font-style:italic;}
#control{position:absolute;display:grid;place-items:center;width:700px;height:430px;left:25%;top:5%;z-index:5;}
#prog{position:absolute;width:215px;height:115px;border-radius:80%;-webkit-mask:radial-gradient(transparent 67%,#000 68%,#000 0);mask:radial-gradient(transparent 67%,#000 68%,#000 0);cursor:pointer;z-index:30;}
#wrapper{z-index:9;position:absolute;padding:0px 0px;color:#00aa00;font:normal 3em "Ma Shan Zheng", "悟空大体库","SimHei", "Arial", "sans-serif";filter:drop-shadow(#000 1px 0 0) drop-shadow(#000 0 1px 0) drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);text-align:center;top:75%;}
.char{display:inline-block;padding:4px 3px;opacity:0;color:#00aa00;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:scale(1);opacity:1;}}
@keyframes flash{to{filter:hue-rotate(360deg)brightness(120%)contrast(650%);}}
.pa{position:absolute;font-size:2.8vw;font-weight:bold;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:20px;text-shadow:2px 2px 4px rgba(0,200,0,.15);filter:drop-shadow(2px 2px 4px lightgreen);background:linear-gradient(180deg,cyan,white) no-repeat 0 0 /100% 10%;right:5%;top:15%;background-clip:text;-webkit-background-clip:text;color:rgba(250,250,250,.25);animation:bmove 6s linear infinite var(--state);clip-path:inset(0.4px);}
@keyframes bmove{to{background-position:0 100%;}}
</style>
<div id="papa">
<canvas id="c"></canvas>
<video class="vid1" src="https://img2.tukuppt.com/video_show/2475824/00/01/49/5b442a61122a2.mp4" loop preload="auto" playsinline autoplay muted></video>
<video class="vid1" src="https://img2.tukuppt.com/video_show/15653652/01/59/07/63806a6eb7241_10s_big.mp4" loop preload="auto" playsinline autoplay muted></video>
<video class="vid2" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b2b2d7852642be6394f57c8cab702bb0_preview.mp4" loop preload="auto" playsinline autoplay muted></video>
<div id="wrapper"></div>
<div class="pa">饮尽岁月一壶酒</div>
<div id="fullscreen">全屏欣赏</div>
<div id="control">
<img src="https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png" id="mutedbnt" title="暂停" onClick="pc()"/>
<div id="statusDisplay">加载中...</div>
<div id="prog" title="调节进度"></div></div>
</div>
<script>
const papa = document.getElementById('papa');
const pic = document.getElementById("mutedbnt");
const vids = document.querySelectorAll('video');
const prog = document.getElementById('prog');

const audio = new Audio('http://music.163.com/song/media/outer/url?id=2736319520.mp3');
audio.loop = false;
audio.volume = 1.0;
audio.preload = 'auto';
audio.play();
function formatTime(seconds) {
if(isNaN(seconds)) return "0:00";
const abs = Math.abs(seconds);
const m = Math.floor(abs/60);
const s = Math.floor(abs%60);
return `${seconds<0?'-':''}${m}:${s<10?'0':''}${s}`;
}
prog.onclick = (e) => {
const cx = 50;
const cy = 50;
const dx = e.offsetX - cx;
const dy = e.offsetY - cy;
let deg = Math.atan2(dy, dx) * 180 / Math.PI;
if (deg < 0) deg += 360;
deg = (deg + 90) % 360;
let newTime = audio.duration * deg / 360;
newTime = Math.max(0, Math.min(audio.duration, newTime));
audio.currentTime = newTime;
};
const gc = `饮尽岁月一壶酒
演唱：影子
词：徐智渊
曲：李勇军
编曲：姜凯升
后期：鲁晓锋
制作人：李勇军工作室
OP：新创焦桐文化

饮尽岁月一壶酒
千杯进肚泪双流
颠沛流离几时休
酷熬日月霜染头
岁月相伴几十秋
杯中有喜也有忧
半醉半醒心中愁
一壶老酒难入喉
饮尽岁月一壶酒
人生百味谁看透
碎银几两苦中求
岁月茫茫月悠悠
饮尽岁月一壶酒
山水无忧风起皱
功名利禄谁带走
酸甜苦辣去感受
岁月相伴几十秋
杯中有喜也有忧
半醉半醒心中愁
一壶老酒难入喉
饮尽岁月一壶酒
人生百味谁看透
碎银几两苦中求
岁月茫茫月悠悠
饮尽岁月一壶酒
山水无忧风起皱
功名利禄谁带走
酸甜苦辣去感受
酸甜苦辣去感受

`;
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) / 1000;
   lrcAr.push(.trim()]);
}
});
lrcAr.sort((a,b)=>a-b);
return lrcAr;
};
const gcAr = lrc2HC(gc);
let curkey = 0;
let isSeeking = false;
let currentLyricText = "";
function findCurrentIndex(time) {
let targetIdx = 0;
for(let i = 0; i < gcAr.length; i++){
if(time >= gcAr){
   targetIdx = i;
}else{
   break;
}
}
return targetIdx;
}
audio.ontimeupdate = () => {
if(isSeeking || gcAr.length === 0) return;
const now = audio.currentTime;
const newIdx = findCurrentIndex(now);
if(newIdx !== curkey){
curkey = newIdx;
const lyricText = gcAr;
showLrc(lyricText, wrapper);
currentLyricText = lyricText;
}
if(!audio.paused && !isNaN(audio.duration)){
const remaining = audio.duration - now;
statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088"> ${formatTime(-remaining)}</span>`;
}
if(!audio.duration) return;
const percent = audio.currentTime / audio.duration;
prog.style.background = `conic-gradient(from 0deg,#CCFF99,#CCFFCC ${percent*100}%, #99CCFF 0)`;

};
audio.onended = () => {
curkey = 0;
currentLyricText = "";
audio.currentTime = 0;
audio.play().catch(e=>console.log(e));
};
audio.onseeked = () => {
isSeeking = true;
currentLyricText = "";
calcKey();
setTimeout(()=>isSeeking=false,150);
};
function calcKey() {
curkey = findCurrentIndex(audio.currentTime);
const lyricText = gcAr;
showLrc(lyricText, wrapper);
currentLyricText = lyricText;
}
function showLrc(str, targetElm) {
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 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(16).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
}

var c = document.getElementById('c');
var w = c.width = 400;
var h = c.height = 400;
var ctxTunnel = c.getContext('2d');
var total = 50;
var particlesParRow = 10;
var minValue = 30;
var templateColor = 'hsl(hue, 80%, 50%)';
var particles = [];
var colors = [];
var radiants = [];
var colorPart = 360 / total;
var radiantPart = (Math.PI * 2) / total;
var tunnelRunning = true;
var tunnelRotation = 0;
for (var i = 0; i < total; ++i) {
var arr = [];
particles.push(arr);
colors.push(templateColor.replace('hue', colorPart * i));
radiants.push(radiantPart * i);
for (var j = 0; j < particlesParRow; ++j) {
   arr.push(10 + Math.random() * 40);
}
}
function updateTunnelParticles() {
for (var i = 0; i < total; ++i) {
   for (var j = 0; j < particlesParRow; ++j) {
         particles += particles / 70;
         if (particles >= w / 2 && Math.random() < 0.1) {
            particles = minValue + Math.random() * 30;
         }
   }
}
}
function drawTunnel() {
ctxTunnel.setTransform(1, 0, 0, 1, 0, 0);
ctxTunnel.clearRect(0, 0, w, h);
ctxTunnel.translate(w / 2, h / 2);
ctxTunnel.rotate(tunnelRotation);
ctxTunnel.translate(-w / 2, -h / 2);
for (var i = 0; i < total; ++i) {
   ctxTunnel.fillStyle = colors;
   for (var j = 0; j < particlesParRow; ++j) {
         var r = particles;
         var rPrev = r - r / 70;
         if (rPrev < 0) rPrev = 0;
         ctxTunnel.beginPath();
         ctxTunnel.arc(w / 2, h / 2, rPrev, radiants, radiants + radiantPart);
         ctxTunnel.arc(w / 2, h / 2, r, radiants + radiantPart, radiants, true);
         ctxTunnel.closePath();
         ctxTunnel.fill();
   }
}
}

function tunnelLoop() {
requestAnimationFrame(tunnelLoop);
if (tunnelRunning) {
   updateTunnelParticles();
   tunnelRotation += 0.006;
}
drawTunnel();
}
tunnelLoop();
function pc(){
if (!audio) return;
if (!audio.paused) {
   audio.pause();pic.title="播放";
   pic.src = "https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png";
   tunnelRunning = false;vids.forEach(vid => vid.pause());
   statusDisplay.innerHTML = `<span style="color:#CC00FF">已暂停</span>`;
} else {
   audio.play(); pic.title="暂停";papa.style.setProperty('--state', 'running');
   pic.src = "https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png";
   tunnelRunning = true; vids.forEach(vid => vid.play());
}
papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault()));</script>
</body>
</html>

梦江南 发表于 2026-8-28 12:09

{:4_174:}沙发

梦江南 发表于 2026-8-28 12:10

好美的景色，深情的歌曲。{:4_187:}

梦江南 发表于 2026-8-28 12:12

饮尽岁月一壶酒也是高光字？

梦江南 发表于 2026-8-28 12:12

没分了，不好了意思。

偶然~ 发表于 2026-8-28 13:01

欣赏杨帆老师佳作

偶然~ 发表于 2026-8-28 13:02

朝阳铺霞，清露凝叶。愿杨帆老师精神饱满，步履轻快，家庭和美，万事称心。午安！

梦江南 发表于 2026-8-28 14:12

有分了，已补上。再赏！{:4_171:}

梦油发表于 2026-8-28 17:17

怎一个美字了得！杨帆朋友的作品越做越精。

霜染枫丹 发表于 2026-8-28 17:40

欣赏扬帆的精美制作，歌曲很有氛围感，赞佩！{:4_204:}{:4_190:}

小辣椒 发表于 2026-8-28 21:24

欣赏杨帆的精彩制作{:4_187:}

红影发表于 2026-8-28 21:45

这制作真漂亮，还有黑黑的最新代码效果。
欣赏扬帆精美作品{:4_199:}

杨帆发表于 2026-8-29 20:53

梦江南发表于 2026-8-28 12:12
饮尽岁月一壶酒也是高光字？

对，马老师的CSS高光游移文本效果。谢谢江南鼓励{:4_204:}

杨帆发表于 2026-8-29 20:55

偶然~ 发表于 2026-8-28 13:02
朝阳铺霞，清露凝叶。愿杨帆老师精神饱满，步履轻快，家庭和美，万事称心。午安！

谢谢偶然~ 管理员的祝福与鼓励{:4_190:}

杨帆发表于 2026-8-29 20:56

梦江南发表于 2026-8-28 14:12
有分了，已补上。再赏！

问好江南，谢谢江南加分鼓励{:4_187:}

杨帆发表于 2026-8-29 20:57

梦油发表于 2026-8-28 17:17
怎一个美字了得！杨帆朋友的作品越做越精。

谢谢梦兄鼓励，祝秋安{:4_190:}

杨帆发表于 2026-8-29 20:58

霜染枫丹发表于 2026-8-28 17:40
欣赏扬帆的精美制作，歌曲很有氛围感，赞佩！

谢谢枫丹老师鼓励，祝秋安{:4_204:}

杨帆发表于 2026-8-29 20:59

小辣椒发表于 2026-8-28 21:24
欣赏杨帆的精彩制作

问好小辣椒，谢谢管理员鼓励，祝秋安{:4_204:}

杨帆发表于 2026-8-29 21:05

红影发表于 2026-8-28 21:45
这制作真漂亮，还有黑黑的最新代码效果。
欣赏扬帆精美作品

谢谢红影管理员鼓励~还尝试学习了了了子老师、亚伦老师的代码，在此一并表示感谢{:4_180:}

梦江南 发表于 2026-8-29 21:07

杨帆发表于 2026-8-29 20:56
问好江南，谢谢江南加分鼓励

这是应该的。不客气哈！

页: [1] 2

花潮论坛's Archiver

饮尽岁月一壶酒