天青色等烟雨而我在等你

杨帆发表于 2026-7-14 17:35

<!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.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">
<link rel="preload" href="https://s3.bmp.ovh/2026/07/14/4fSlP0A2.jpg" as="image">
<title>青花瓷</title>
<style>
#pa {margin: 30px 0;left: calc(50% - 81px);transform: translateX(-50%);width: clamp(600px, 90vw, 1400px);height: auto;aspect-ratio: 16/9;box-shadow: 2px 2px 8px #000;z-index: 1;color: lightblue;overflow: hidden;position: relative;--state:running;background:var(--bg1);--bg1:#000 url('https://s3.bmp.ovh/2026/07/14/cNivK1TW.jpg') no-repeat center/cover;--bg2:#000 url('https://s3.bmp.ovh/2026/07/14/4fSlP0A2.jpg') no-repeat center/cover;}
#playBtn {position: absolute;left:30px;top:30px;width: 150px;height: 150px;transition: 3s;filter: drop-shadow(0 0 24px gold);cursor: pointer;animation: rot 5s linear infinite var(--state);}
#playBtn:hover {filter: invert(1) drop-shadow(0 0 24px cyan) !important;}
.vid {position: absolute;width: 100%;height: 100%;object-fit: cover;mix-blend-mode: screen;mask: linear-gradient(to right top, red 80% ,transparent 90%);-webkit-mask: linear-gradient(to right top, red 80% ,transparent 90%);opacity: .45;pointer-events: none;}
@keyframes rot {to {transform: rotate(1turn);}}
#lyricWrapper {position: fixed;top: 15%;right: 75px;width: 70px;height: 560px;z-index: 15;pointer-events: none;font: 600 50px/1.1 "Long Cang","Ma Shan Zheng", "STKaiti";letter-spacing: 0px;text-align: center;filter: drop-shadow(#c6ffee 1px 0 0) drop-shadow(#c6ffee 0 1px 0) drop-shadow(#c6ffee -1px 0 0) drop-shadow(#c6ffee 0 -1px 0);}
.char {display: block;padding: 4px 0;opacity: 0;transform: translateY(-30px);animation: fadeIn 1.2s var(--delay) forwards, flash 0.6s linear infinite;}
@keyframes fadeIn {100% {transform: translateY(0);opacity: 1;}}
@keyframes flash {100% {filter: hue-rotate(360deg);}}
.stop .char {animation-play-state: paused;}
#fullscreen {border-radius:4px;position:absolute;color:DarkGray;padding:4px 8px;z-index:12;font-size:25px;border:none;cursor:pointer;bottom:25px;right:25px;background:transparent;}
#fullscreen:hover {font-style:italic;}
#mutedbnt {position:absolute;z-index: 10;width: 82px;height: 82px;top: 73%;left: 13%;cursor: pointer;}
#statusDisplay {position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:15%;top:13%;color:#fff;}
</style>

<div id="pa">
   <div id="lyricWrapper"></div>
   <div id="fullscreen">全屏欣赏</div>
   <div id="statusDisplay">播放中: -4:28</div>
   <img src="https://www.helloimg.com/i/2026/07/14/6a558594dded1.gif" id="mutedbnt" onclick="player.togglePlay()" />
   <video class="vid" src="https://img2.tukuppt.com/video_show/2418175/01/04/62/614ade273f6d1.mp4" autoplay loop muted></video>
   <video class="vid" src="https://img2.tukuppt.com/video_show/2475824/00/01/52/5b44f4d7298d6.mp4" autoplay loop muted></video>
   <img id="playBtn" src="https://pic.imgdb.cn/item/6742e3d588c538a9b5bb4f7d.png" alt="" />
</div>
<script>
(function() {
let audioElement = null;
let lyricData = [];
let curkey = -1;
const OFFSET = 0.25;
const songLrc = `
青花瓷
演唱：刘芳
素胚勾勒出青花
笔锋浓转淡
瓶身描绘的牡丹
一如你初妆
冉冉檀香透过窗
心事我了然
宣纸上走笔至此搁一半

釉色渲染仕女图
韵味被私藏
而你嫣然的一笑
如含苞待放
你的美一缕飘散
去到我去不了的地方

天青色等烟雨
而我在等你
炊烟袅袅升起
隔江千万里
在瓶底书汉隶仿
前朝的飘逸
就当我为遇见你伏笔

天青色等烟雨
而我在等你
月色被打捞起
云开了结局
如传世的青花瓷
自顾自美丽
你眼带笑意

色白花青的锦鲤
跃然于碗底
临摹宋体落款时
却惦记着你
你隐藏在窑烧里
千年的秘密
极细腻犹如绣花针落地

帘外芭蕉惹骤雨
门环惹铜绿
而我路过那江南
小镇惹了你
在泼墨山水画里
你从墨色深处被隐去
天青色等烟雨
而我在等你
炊烟袅袅升起
隔江千万里
在瓶底书汉隶仿
前朝的飘逸
就当我为遇见你伏笔
天青色等烟雨

而我在等你
月色被打捞起
云开了结局
如传世的青花瓷
自顾自美丽
你眼带笑意

天青色等烟雨
而我在等你
炊烟袅袅升起
隔江千万里
在瓶底书汉隶仿
前朝的飘逸
就当我为遇见你伏笔

天青色等烟雨
而我在等你
月色被打捞起
云开了结局
如传世的青花瓷
自顾自美丽
你眼带笑意

`;
const lyricWrapper = document.getElementById('lyricWrapper');
const playBtn = document.getElementById('playBtn');
var img = document.getElementById("mutedbnt");
const vids = document.querySelectorAll('video');
const pa = document.getElementById('pa');
const bg1 = getComputedStyle(pa).getPropertyValue('--bg1');
const bg2 = getComputedStyle(pa).getPropertyValue('--bg2');
const statusDisplay = document.getElementById('statusDisplay');
let isClickLock = false;
function formatTime(seconds) {
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}`;
}
function lrc2HC(text) {
let lrcAr = [];
const ar = text.trim().split('\n');
const reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
   if (reg.test(item)) {
         const r = item.match(reg);
         const t = Number(r) * 60 + Number(r) + Number(r) / 1000;
         lrcAr.push(.trim()]);
   }
});
return lrcAr;
}
function getCurrentLyricIndex(time) {
let left = 0, right = lyricData.length - 1, targetIdx = 0;
while (left <= right) {
   const mid = Math.floor((left + right) / 2);
   if (lyricData <= time) {
         targetIdx = mid;
         left = mid + 1;
   } else {
         right = mid - 1;
   }
}
return targetIdx;
}
function showLrc(str, targetElm) {
targetElm.innerHTML = '';
const chars = str.split('');
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
   const span = document.createElement('span');
   span.textContent = char === ' ' ? '·' : char;
   span.className = 'char';
   const color = "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
   span.style.cssText = `color:${color};--delay:${idx * 0.08}s;`;
   frg.appendChild(span);
});
targetElm.appendChild(frg);
}
function syncLyric() {
if (!audioElement || !lyricData.length) return;
const nowTime = audioElement.currentTime + OFFSET;
const idx = getCurrentLyricIndex(nowTime);
if (idx !== curkey) {
   curkey = idx;
   showLrc(lyricData, lyricWrapper);
}
}
function syncAllUIState() {
const audio = player.audioObj;
if(!audio) return;
if(audio.paused){
   img.title = playBtn.title = "播放";
   pa.style.background = bg2;
   playBtn.style.setProperty('--state', 'paused');
   img.src = "https://www.helloimg.com/i/2026/07/14/6a558594dc233.png";
   lyricWrapper.classList.add('stop');
   statusDisplay.innerHTML = '<span style="color:#CC00FF">已暂停</span>';
   vids.forEach(vid=>vid.pause());
}else{
   img.title = playBtn.title = "暂停";
   pa.style.background = bg1;
   playBtn.style.setProperty('--state', 'running');
   img.src = "https://www.helloimg.com/i/2026/07/14/6a558594dded1.gif";
   lyricWrapper.classList.remove('stop');
   vids.forEach(vid=>vid.play());
}
}
function bindAudioLrcSync() {
if (!audioElement) return;
function loopSync() {
   if (!audioElement.paused) syncLyric();
   requestAnimationFrame(loopSync);
}
loopSync();
audioElement.onseeked = () => {
   curkey = -1;
   syncLyric();
};
audioElement.onended = () => {
   curkey = -1;
   audioElement.currentTime = 0;
   audioElement.play();
}
}
class AudioPlayer {
constructor() {
   this.audioObj = null;
   this.init();
}
init() {
   lyricData = lrc2HC(songLrc);
   this.audioObj = new Audio("http://music.163.com/song/media/outer/url?id=259138.mp3");
   this.audioObj.preload = "auto";
   audioElement = this.audioObj;
   bindAudioLrcSync();
   this.audioObj.onloadeddata = () => {
         this.audioObj.play().catch(e => console.log("浏览器自动播放限制，请点击按钮播放"));
         playBtn.title = "暂停";
         playBtn.style.setProperty('--state', 'running');
         syncLyric();
         syncAllUIState();
   };
   playBtn.addEventListener('click', (e) => {
         e.stopPropagation();
         this.togglePlay();
   });
   mutedbnt.addEventListener('click', (e) => {
         e.stopPropagation();
         this.togglePlay();
   });
}
togglePlay() {
   if (isClickLock) return;
   isClickLock = true;
   const audio = this.audioObj;
   if (audio.paused) {
         audio.play();
         vids.forEach(vid =>vid.play());
         lyricWrapper.classList.remove('stop');
         img.title = playBtn.title = "暂停";
         pa.style.background = bg1;
         playBtn.style.setProperty('--state', 'running');
         img.src = "https://pic1.imgdb.cn/item/6a03cf00c05e72d91720910b.gif";
         const remain = audio.duration - audio.currentTime;
         statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-remain)}</span>`;
   } else {
         audio.pause();
         vids.forEach(vid => vid.pause());
         lyricWrapper.classList.add('stop');
         img.title = playBtn.title = "播放";
         pa.style.background = bg2;
         playBtn.style.setProperty('--state', 'paused');
         img.src = "https://pic1.imgdb.cn/item/68e9c0c2c5157e1a886337ae.png";
         statusDisplay.innerHTML = '<span style="color:#CC00FF">已暂停</span>';
   }
   setTimeout(() => isClickLock = false, 300);
}
}
const player = new AudioPlayer();
player.audioObj.addEventListener('timeupdate',()=>{
const audio = player.audioObj;
if (!audio || isNaN(audio.duration)) return;
const current = audio.currentTime;
const duration = audio.duration;
const remaining = current - duration;
statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(remaining)}</span>`;
})
const fullscreen = document.getElementById('fullscreen');
let fs = true,fsTimer, moveTimer = null;
fullscreen.onclick = ()=>{
if(fs){
fullscreen.innerText = '退出全屏';
pa.requestFullscreen().catch(err=>console.log(err));
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen().catch(err=>console.log(err));
}
fs = !fs;
};
pa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.style.opacity = '0', 2500);
});
document.addEventListener('visibilitychange', () => {
const audio = player.audioObj;
if (!audio) return;
if (document.hidden) {
if (!audio.paused) audio.pause();
} else {
if (audio.paused && !audio.ended) audio.play().catch(() => {});
}
setTimeout(syncAllUIState, 50);
});
['contextmenu', 'dragstart', 'selectstart'].forEach(ev =>
pa.addEventListener(ev, (e) => { e.preventDefault(); })
);
pa.addEventListener('mousemove', function(e) {
clearTimeout(moveTimer);
const rect = pa.getBoundingClientRect();
if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {
   return;
}
moveTimer = setTimeout(() => {
   if(e.target === playBtn) return;
   const btnW = playBtn.offsetWidth;
   const btnH = playBtn.offsetHeight;
   const wrapW = pa.clientWidth;
   const wrapH = pa.clientHeight;
   let x = e.offsetX - btnW / 2;
   let y = e.offsetY - btnH / 2;
   x = Math.max(0, Math.min(x, wrapW - btnW));
   y = Math.max(0, Math.min(y, wrapH - btnH));
   playBtn.style.left = x + 30 + "px";
   playBtn.style.top = y + 30 + "px";
}, 400);
});
pa.addEventListener('mouseleave', () => clearTimeout(moveTimer));
})();
</script>
</body>
</html>

杨帆发表于 2026-7-14 17:38

代码来自马黑黑老师分享作品，在此表示感谢{:4_190:}

红影发表于 2026-7-14 18:31

这个小播是鼠标跟随的，暂停后背景图就变了呢。这个是演唱者刘芳吧，貌似有点胖啊{:4_173:}
好像点击那个小喇叭，小播就自动跑到左上去了。视频选用漂亮。
欣赏杨帆好帖{:4_187:}

偶然~ 发表于 2026-7-14 20:19

来欣赏杨帆律诗制作的佳作

偶然~ 发表于 2026-7-14 20:20

杨帆老师此音画制作大气，背景歌曲动听，辛苦了，祝你健康快乐

杨帆发表于 2026-7-14 20:46

本帖最后由杨帆于 2026-7-14 20:54 编辑

红影发表于 2026-7-14 18:31
这个小播是鼠标跟随的，暂停后背景图就变了呢。这个是演唱者刘芳吧，貌似有点胖啊
好像点击那个 ...
演唱者是刘芳，但图片是网上随意找的，鼓捣着玩呢，谢谢影子鼓励{:4_204:}

杨帆发表于 2026-7-14 20:47

偶然~ 发表于 2026-7-14 20:20
杨帆老师此音画制作大气，背景歌曲动听，辛苦了，祝你健康快乐

问好偶然~兄弟，谢谢鼓励，祝夏安{:4_180:}

红影发表于 2026-7-14 21:42

杨帆发表于 2026-7-14 20:46
演唱者是刘芳，但图片是网上随意找的，鼓捣着玩呢，谢谢影子鼓励

哦哦，这个图图不是演唱者啊{:4_173:}

梦江南 发表于 2026-7-15 09:25

青花盘做小播放还会变色，还会切换画面，有创意!{:4_187:}

梦江南 发表于 2026-7-15 09:27

谢谢杨帆带来的精彩音画，分享点赞！{:4_204:}

杨帆发表于 2026-7-15 10:40

梦江南发表于 2026-7-15 09:25
青花盘做小播放还会变色，还会切换画面，有创意!

呵呵，这是你的青花盘呢，谢谢江南，谢谢鼓励，祝夏安{:4_204:}

梦江南 发表于 2026-7-15 10:46

杨帆发表于 2026-7-15 10:40
呵呵，这是你的青花盘呢，谢谢江南，谢谢鼓励，祝夏安

我知道，很开心啊。祝你初伏安康，夏日长安！

偶然~ 发表于 2026-7-16 13:53

杨帆发表于 2026-7-14 20:47
问好偶然~兄弟，谢谢鼓励，祝夏安

健康为本心常静，福运亨通乐无边。

页: [1]

花潮论坛's Archiver

天青色等烟雨而我在等你