网站首页 › ┫单幅音画┣ › 【水芙蓉音画】你是窗外另外一片风景

醉美水芙蓉 发表于 2026-2-14 15:45:22

【水芙蓉音画】你是窗外另外一片风景

<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Wang+Xi+Zhi&family=Zhao+Meng+Fu&family=Ou+Yang+Xun&display=swap");
#papa{margin:30px 0;width:clamp(600px,90vw,1400px);min-height:80vh;aspect-ratio:16/9;left:calc(50% - 81px);transform:translateX(-50%);--bg1:url('https://bbs.cnzv.cc/up/upload/pic/12/20260214-866e50de8a7eb263c5c7f8d146043acc.jpg') no-repeat center/cover;--bg2:url('https://bbs.cnzv.cc/up/upload/pic/12/20260214-866e50de8a7eb263c5c7f8d146043acc.jpg') no-repeat center/cover;box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;background:var(--bg1),var(--bg2);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;--display:block;z-index:1}
#vid{position:absolute;inset:0;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;pointer-events:none;opacity:.8;mask:linear-gradient(to bottom,red 30%,transparent 51%,transparent);-webkit-mask:linear-gradient(to bottom,red 30%,transparent 51%,transparent);object-position:center;display:block}
.vid{position:absolute;inset:0;left:-20%;top:-20%;width:140%;height:140%;object-fit:cover;pointer-events:none;opacity:.5;object-position:center;mix-blend-mode:screen;display:var(--display)}
#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;left:5%;top:15%;transform:translateX(-50%);font:normal 2.5em "Ma Shan Zheng","SimHei","华文行楷","华文新魏","Microsoft YaHei",Arial,"sans-serif";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;width:350px;height:350px;right:1%;bottom:5%;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:7%;z-index:18;appearance: none;filter:invert(100%) hue-rotate(300deg);background:brown;width:40%;height:5px;cursor:pointer;pointer-events:auto;display:var(--display)}
#prog::-webkit-progress-value{background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#prog::-webkit-progress-bar        {background:hsla(120,100%,50%,0.3);}
#prog::-moz-progress-value{background:linear-gradient(-45deg, red, yellow, green, purple, blue);}
#prog::-moz-progress-bar{background:hsla(120,100%,50%,0.3);}
#tmsg{position:absolute;right:22%;bottom:7%;z-index:8;font:normal 13px sans-serif;color:#fff;display:var(--display)}
#ptxt{position:absolute;left:25%;bottom:7%;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)}}
#ppcontainer{margin:auto;position:absolute;width:100%;height:100px;bottom:5px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 4px}
@keyframes breath{0%{filter:brightness(1)}50%{filter:brightness(1.2)}100%{filter:brightness(1)}}
.mLine{position:relative;margin:0 2px -1px 0;width:6px;min-height:6px;max-height:180px;background:linear-gradient(to top,#64b5f6,#1e88e5,#64b5f6);transition:var(--tst);animation:breath 2s ease-in-out infinite;box-shadow:0 0 4px rgba(30,136,229,0.5)}
.mLine::before{position:absolute;content:'';width:100%;height:3px;background:var(--line-border-color,snow);top:0}
.mLine:nth-of-type(odd) { background: linear-gradient(to top,#ff0000,#ff6600,#ffff00); }
</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>
<div id="ppcontainer"></div>
<video id="vid" src="https://cccimg.com/view.php/7f9f1d52f7c575953b6957576cd5d0b2.mp4" autoplay loop muted></video>
<video class="vid" src="https://upfile.mp3.wf/view.php/66ed12e3bbef7d9836f2bb1ef6334c55.mp4" autoplay loop muted></video>
<img class="dancer" src="https://bbs.cnzv.cc/up/upload/pic/12/20250624-3379b3b727fa14b592879f2af597f50b.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/144238.mp3" loop autoplay playsinline></div>
<script>
var ypData=.map(val=>val*0.5);
var total=80,lines=[],idx,len,step;
for(j=0;j<total;j++){var el=document.createElement('span');el.className='mLine';ppcontainer.appendChild(el);lines.push(el)}
plusOrMinus=()=>Math.random()>0.5?1:-1;
output=(all,num)=>{if(num===0)return Array(all).fill(0);return Array(all).fill(0).map(item=>{const baseHeight=Math.random()*num*0.8;const offset=plusOrMinus()*num/4;let finalHeight=Math.ceil(baseHeight+offset);finalHeight=Math.max(finalHeight,6);finalHeight=Math.min(finalHeight,180);return finalHeight})};
(function update(){var ar=output(total,aud.paused?0:ypData);ar.forEach((a,k)=>{lines.style.height=ar+'px';if(a>120){const brightness=Math.random()>0.7?1.5:1;lines.style.filter=`brightness(${brightness})`}else{lines.style.filter='brightness(1)'}});window.requestAnimationFrame(update)})();
aud.addEventListener('timeupdate',()=>{idx=Math.floor(aud.currentTime/step)});
aud.addEventListener('canplay',()=>{len=ypData.length;step=aud.duration/len;const safeStep=Math.max(Math.min(step,0.2),0.1);papa.style.setProperty('--tst',safeStep+'s')});
</script><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('--bg1','');papa.style.setProperty('--bg2','none');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('--bg1','none');papa.style.setProperty('--bg2','');papa.style.setProperty('--display','none');mdiv.style.animationPlayState='paused';lrc.style.setProperty('--state','paused')}
mdiv.title=aud.paused?'播放':'暂停';dancer.forEach(item=>{item.title='Pause'})};
dancer.forEach(item=>{item.onclick=()=>mdiv.click()});
(function(){const lrcStr=`
是非题
LRC编辑：醉美水芙蓉
每段故事都有一篇剧情
每段爱情都像动人旋律
一颗真心却只向着你前进
也许爱越单纯越着迷
你是窗外另外一片风景
在你眼里我是什么关系
你的呼吸存在我的爱情里
何时能诚实面对自己
我们从不开口那个原因
那一句我爱你
永远像少了勇气
别人都说
我和你之间的关系
没有人相信只有关心
我们从不证实那个问题
那一些是非题
总让人伤透脑筋
我会期待
爱盛开那一个黎明
一定会有美丽的爱情
你是窗外另外一片风景
在你眼里我是什么关系
你的呼吸存在我的爱情里
何时能诚实面对自己
我们从不开口那个原因
那一句我爱你
永远像少了勇气
别人都说
我和你之间的关系
没有人相信只有关心
我们从不证实那个问题
那一些是非题
总让人伤透脑筋
我会期待
爱盛开那一个黎明
一定会有美丽的爱情
我们从不开口那个原因
那一句我爱你
永远像少了勇气
别人都说
我和你之间的关系
没有人相信只有关心
我们从不证实那个问题
那一些是非题
总让人伤透脑筋
我会期待
爱盛开那一个黎明
一定会有美丽的爱情
谢谢欣赏！
`;
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)})();
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault()));
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";document.getElementById("ptxt").innerText=((percent*100).toFixed(2))+"%"})
</script>

玫の玫 发表于 2026-2-14 16:02:10

欣赏友友佳作，
感谢精彩分享，
感谢给大家带来美滴享受！
祝创作愉快，
天天好心情！
{:9_285:}

玫の玫 发表于 2026-2-14 16:02:40

听乐赏图，
真是美美哒！
听音乐带来好心情，
赞赞赞！{:9_285:}

圊圊淥詶 发表于 2026-2-14 16:28:10

最美好久不见，问好~~

圊圊淥詶 发表于 2026-2-14 16:30:39

听曲赏图，整体做的很漂亮，谢谢最美分享，辛苦了~~

圊圊淥詶 发表于 2026-2-14 16:31:01

预祝最美新年快乐，万事顺心~~{:S06:}

绿蔷薇 发表于 2026-2-14 16:43:30

窗外是治愈的风景，窗内是醇厚的咖啡香~~{:S16:}

绿蔷薇 发表于 2026-2-14 16:44:08

佳人静立，光影流转，看一眼便心动~{:1_233:}

绿蔷薇 发表于 2026-2-14 16:44:53

元素丰富的图图，芙蓉制作的漂亮
问好芙蓉，遥祝新年快乐、马年吉祥
{:9_269:}

玫の玫 发表于 2026-2-14 17:19:35

晚风拂动衣袂，发梢沾着碎金，她垂眸执盏的模样，温柔了整幅黄昏的画卷。

查看完整版本: 【水芙蓉音画】你是窗外另外一片风景