杨帆 发表于 2026-6-17 13:55

心归云水间

本帖最后由 杨帆 于 2026-7-10 18:38 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>心归云水间</title>
<style>
@import url("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");
#papa{margin:130px 0 20px calc(50% - 721px);background:#000 url('https://pic1.imgdb.cn/item/6a301d59b755a1449d6a3b97.jpg') no-repeat center center/cover;width:1280px;height:750px;box-shadow:3px 3px 6px gray;overflow:hidden;position:relative;display:grid;place-items:center;z-index:1;font-family:"ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-serif";user-select:none;--state:running;}
#msvg{position:absolute;cursor:pointer;transition:1.2s;animation:ringRot 3s linear infinite var(--state);z-index:15;left:3%;bottom:3%;width:120px;height:120px;}
.vid{position:absolute;z-index:1;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;pointer-events:none;object-position:center;mask: linear-gradient(to bottom, red 0% ,transparent 91%,transparent);-webkit-mask: linear-gradient(to bottom, red 0% ,transparent 91%,transparent);}
.vid1{position:absolute;z-index:1;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;pointer-events:none;object-position:center; mask: linear-gradient(to bottom, red 0% ,transparent 51%,transparent);-webkit-mask: linear-gradient(to bottom, red 0% ,transparent 51%,transparent);}
#fullscreen{border-radius:4px;position:absolute;color:darkgray;padding:4px 8px;z-index:12;font-size:25px;border:none;cursor:pointer;top:25px;left:25px;background:transparent;}
#fullscreen:hover{font-style:italic;}
.song-title{position:absolute;top:60px;left:calc(50%);transform:translateX(-50%);max-width:40%;height:10%;color:#FF1493;font-family:"Ma Shan Zheng",'Microsoft YaHei',"华文新魏",cursive;font-size:4.5rem;margin-bottom:20px;letter-spacing:6px;z-index:2;transform:perspective(800px) rotateY(0deg);text-shadow:1px 1px 0 #fff,2px 2px 0 #fff,3px 3px 0 #fff;background:none;border:none;box-shadow:none;padding:0;transition:1.2s;filter:url("#turbulence");animation:scale 12s ease infinite alternate var(--state);}
@keyframes ringRot{to{transform:rotate(1turn);filter:hue-rotate(360deg);}}
@keyframes scale{0%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}20%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}40%{transform:translateX(-50%) perspective(800px) rotateY(-25deg) scale(1.2);}60%{transform:translateX(-50%) perspective(800px) rotateY(25deg) scale(1.2);}80%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}100%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}}
#wrapper{position:absolute;padding:0px;font-weight:200;font-size:3.2rem;font-family:"Long Cang","ZCOOL KuaiLe","KaiTi","Ma Shan Zheng","STKaiti","SimHei",cursive,serif;filter:drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);writing-mode:vertical-lr;white-space:pre;transform:translateX(-50%);text-align:center;width:60px;height:90%;left:90%;z-index:20;top:0;white-space:nowrap;}
.char{display:inline-block;padding:2px 0px;opacity:0;transform:translate(var(--x),var(--y)) rotate(-720deg);animation:fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;}
@keyframes fadeIn{100%{transform:translate(0,50%);opacity:1;}}
@keyframes flash{100%{filter:hue-rotate(360deg);}}
.stop .char{animation-play-state:paused;}
.stop .text-inner{animation-play-state:paused;}
.tv{position:absolute;width:25vw;height:15vw;top:28%;left:calc(50% - 0px);transform:translateX(-50%);z-index:5;}
.tv-container{position:absolute;left:0;top:0;width:100%;height:100%;transform:perspective(900px) rotateY(30deg) skewX(0deg);transform-style:preserve-3d;border:0px solid #555;box-shadow:0 0 30px rgba(0,0,0,0.5);overflow:hidden;border-radius:10%;background:rgba(0,0,0,0.12);}
#vid{position:absolute;width:105%;height:105%;left:-2.5%;top:-2.5%;object-fit:fill;pointer-events:none;transform:skewX(2.8deg);z-index:2;opacity:0.95;mix-blend-mode: multiply;}
.tv-container::after{content:'';position:absolute;bottom:-15px;left:0;width:100%;height:15px;background:#222;transform:rotateX(90deg) translateY(7px);transform-origin:top;}
.additional-text{font-family:'微软雅黑',sans-serif;font-size:20px;font-weight:bold;text-align:center;padding:10px 20px;border-radius:10px;position:absolute;top:2px;left:calc(50% + 0px);transform:translateX(-50%);width:max-content;z-index:10;letter-spacing:2px;}
@keyframes textColorBright{0%{color:#ff5577;}20%{color:#ffdd44;}40%{color:#44eeff;}60%{color:#8877ff;}80%{color:#ff77dd;}100%{color:#ff5577;}}
.text-inner{color:#fff;text-shadow:0 0 8px #000,2px 2px 4px black;animation:textColorBright 2s linear infinite;display:inline-block;font-weight:bold;}
</style>
</head>
<body>
<div id="papa">
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1389812951.mp3" loop autoplay></audio>
<video class="vid" src="https://img2.tukuppt.com/video_show/2475824/00/01/72/5b492fae7af99.mp4" preload="auto" autoplay loop playsinline muted></video>
<video class="vid1" src="https://img2.tukuppt.com/video_show/2629112/00/02/06/5b509bb0793dd.mp4" preload="auto" autoplay loop playsinline muted></video>
<div id="fullscreen">全屏欣赏</div>
<div class="tv">   
      <div class="tv-container">
            <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5955589a5efe9f34852b6497364902e6_preview.mp4" autoplay loop muted></video>
         <div class="additional-text">
                <span class="text-inner">正在播放：心归云水间</span>
            </div>                        
    </div>
</div>
<div id="testImg" >
      <div id="wrapper"></div>
    </div>
<div class="song-title">心归云水间</div>
<svg id="msvg" viewBox="0 0 448 512"><title id="svgtext">暂停</title>
<defs id="defs">
<radialGradient id="grd" cx="55%" cy="45%" r="60%">
<stop offset="0%" stop-color="#00FFFF"></stop>
<stop offset="50%" stop-color="#6495ED"></stop>
<stop offset="100%" stop-color="#7B68EE"></stop>
</radialGradient>
</defs>
</svg>
<svg id="reflect">
<filter id="turbulence" x="0%" y="0%" width="100%" height="100%">
<feTurbulence id="ripples" numOctaves="6" seed="6" baseFrequency="0.02 0.05"></feTurbulence>
<feDisplacementMap scale="8" in="SourceGraphic"></feDisplacementMap>
<animate xlink:href="#ripples" attributeName="baseFrequency" dur="30s" keyTimes="0;0.5;1" values="0.02 0.05;0.04 0.07;0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>
</div>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var d = 'M440.1 355.2l-39.2-23 34.1-9.3c8.4-2.3 13.4-11.1 11.1-19.6l-4.1-15.5c-2.2-8.5-10.9-13.6-19.3-11.3L343 298.2 271.2 256l71.9-42.2 79.7 21.7c8.4 2.3 17-2.8 19.3-11.3l4.1-15.5c2.2-8.5-2.7-17.3-11.1-19.6l-34.1-9.3 39.2-23c7.5-4.4 10.1-14.2 5.8-21.9l-7.9-13.9c-4.3-7.7-14-10.3-21.5-5.9l-39.2 23 9.1-34.7c2.2-8.5-2.7-17.3-11.1-19.6l-15.2-4.1c-8.4-2.3-17 2.8-19.3 11.3l-21.3 81-71.9 42.2v-84.5L306 70.4c6.1-6.2 6.1-16.4 0-22.6l-11.1-11.3c-6.1-6.2-16.1-6.2-22.2 0l-24.9 25.4V16c0-8.8-7-16-15.7-16h-15.7c-8.7 0-15.7 7.2-15.7 16v46.1l-24.9-25.4c-6.1-6.2-16.1-6.2-22.2 0L142.1 48c-6.1 6.2-6.1 16.4 0 22.6l58.3 59.3v84.5l-71.9-42.2-21.3-81c-2.2-8.5-10.9-13.6-19.3-11.3L72.7 84c-8.4 2.3-13.4 11.1-11.1 19.6l9.1 34.7-39.2-23c-7.5-4.4-17.1-1.8-21.5 5.9l-7.9 13.9c-4.3 7.7-1.8 17.4 5.8 21.9l39.2 23-34.1 9.1c-8.4 2.3-13.4 11.1-11.1 19.6L6 224.2c2.2 8.5 10.9 13.6 19.3 11.3l79.7-21.7 71.9 42.2-71.9 42.2-79.7-21.7c-8.4-2.3-17 2.8-19.3 11.3l-4.1 15.5c-2.2 8.5 2.7 17.3 11.1 19.6l34.1 9.3-39.2 23c-7.5 4.4-10.1 14.2-5.8 21.9L10 391c4.3 7.7 14 10.3 21.5 5.9l39.2-23-9.1 34.7c-2.2 8.5 2.7 17.3 11.1 19.6l15.2 4.1c8.4 2.3 17-2.8 19.3-11.3l21.3-81 71.9-42.2v84.5l-58.3 59.3c-6.1 6.2-6.1 16.4 0 22.6l11.1 11.3c6.1 6.2 16.1 6.2 22.2 0l24.9-25.4V496c0 8.8 7 16 15.7 16h15.7c8.7 0 15.7-7.2 15.7-16v-46.1l24.9 25.4c6.1 6.2 16.1 6.2 22.2 0l11.1-11.3c6.1-6.2 6.1-16.4 0-22.6l-58.3-59.3v-84.5l71.9 42.2 21.3 81c2.2 8.5 10.9 13.6 19.3 11.3L375 428c8.4-2.3 13.4-11.1 11.1-19.6l-9.1-34.7 39.2 23c7.5 4.4 17.1 1.8 21.5-5.9l7.9-13.9c4.6-7.5 2.1-17.3-5.5-21.7z';
dr.path(d,'url(#grd)').set('fill-rule', 'evenodd');
</script>
<script>
const gc = `
心归云水间
演唱：云卉
守望在这绿色的原野
我唱四季恋歌伴你入眠
春赏醉美花海
夏享清凉世界
秋观层林尽染
冬品水墨画卷
等待温暖最好的华年
枳花素染似雪树海连绵
雨林云封雾锁
海丝韵话东溪窑
画尽世间风华
万人的眷恋
我登圆楼凝望浪漫
只见你独步雪英桥
依窗墨兰为你发香
再见你守候云水谣
不想知道你到底从哪儿来
不愿问你何时何时离去
此处释放你烦扰
此景只为我拥抱
愿你寻梦而来
心归云水之间
等待温暖最好的华年
枳花素染似雪树海连绵
雨林云封雾锁
海丝韵话东溪窑
画尽世间风华
万人的眷恋
我登圆楼凝望浪漫
只见你独步雪英桥
依窗墨兰为你发香
再见你守候云水谣
不想知道你到底从哪儿来
不愿问你何时何时离去
此处释放你烦扰
此景只为我拥抱
愿你寻梦而来
心归云水之间
心归云水之间
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;

aud.ontimeupdate = () => {
    if(curkey > gcAr.length - 1) return;
    if(aud.currentTime >= gcAr) {
      const gap = (gcAr?. || 0) - gcAr;
      showLrc(gcAr, wrapper, gap);
    }
    const currentTime = aud.currentTime;
    if(!aud.paused && aud.duration) renderPlayTime();
};
aud.onended = () => {
    curkey = 0;
    aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
    let lrcAr = [];
    const ar = text.trim().split('\n');
    ar.sort();
    const reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      if(reg.test(item)) {
            let result = item.match(reg);
            const tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
            lrcAr.push(.trim()]);
      }
    });
    return lrcAr.length ? lrcAr : [];
};
function calcKey() {
    for (let j = 0; j < gcAr.length; j++) {
      if (aud.currentTime <= gcAr) {
            curkey = j - 1;
            break;
      }
    }
    if (curkey < 0) curkey = 0;
    if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
    const time = (gcAr?. || 0) - gcAr;
    isSeeking = false;
    showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
    if(isSeeking) return;
    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 ? -1200 : -1200);
      const y = Math.random() * (Math.random() > 0.5 ? 600: -600);
      span.style.cssText += `color:#${Math.random().toString(15).substring(2,8)};--x:${x}px;--y:${y}px;--delay:${Math.random()*0.5}s;`;
      frg.appendChild(span);
    });
    targetElm.appendChild(frg);
    curkey ++;
    setTimeout(() => isSeeking = false, time * 1000);
}
const statusDisplay = document.getElementById('statusDisplay');
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 renderPlayTime() {
      if(!aud.duration) return;
      const rem = aud.duration - aud.currentTime;
      statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-rem)}</span>`;
}
['contextmenu', 'dragstart', 'selectstart'].forEach(type =>
    papa.addEventListener(type, e => e.preventDefault())
);
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
    if (!aud.paused) aud.pause();
} else {
    if (aud.paused && !aud.ended) aud.play().catch(()=>{});
}
});
const vids = document.querySelectorAll('video');
const additionalText = document.querySelector('.additional-text');
msvg.onclick = () => {
svgtext.textContent = aud.paused ? "暂停" : "播放";
papa.style.setProperty('--state', aud.paused ? 'running' : 'paused');
if(aud.paused) {
    aud.play().catch(()=>{});
    vids.forEach(vid =>vid.play().catch(()=>{}));
    wrapper.classList.remove('stop');
    additionalText.classList.remove('stop');
    reflect.unpauseAnimations();
} else {
    aud.pause();
    vids.forEach(vid =>vid.pause());
    wrapper.classList.add('stop');
    additionalText.classList.add('stop');
    reflect.pauseAnimations();
}
};
let fs = true,fsTimer;
fullscreen.onclick = ()=>{
if(fs){
    fullscreen.innerText = '退出全屏';
    papa.requestFullscreen();
}else{
    fullscreen.innerText = '全屏欣赏';
    document.exitFullscreen();
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.style.opacity = '0', 2500);
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
    if (!aud.paused) aud.pause();
} else {
    if (aud.paused && !aud.ended) aud.play().catch(()=>{});
}
});
['contextmenu', 'dragstart', 'selectstart'].forEach(ev =>
papa.addEventListener(ev, (e) => {
    e.preventDefault();
})
);
</script>
</body>
</html>

梦江南 发表于 2026-6-17 14:12

{:4_174:}欣赏杨帆的精彩音画。这也是对口型唱歌的吗？{:4_187:}

梦江南 发表于 2026-6-17 14:13

标题字特效漂亮，动感十足。赞！{:4_199:}

也曾年轻 发表于 2026-6-17 15:08

https://5b0988e595225.cdn.sohucs.com/images/20170929/062e8b7bb79942b3ad2b0868bd570947.gif

梦油 发表于 2026-6-17 17:10

优美的意境，悦耳的歌声，太美了。谢谢杨帆朋友。

杨帆 发表于 2026-6-17 21:29

梦江南 发表于 2026-6-17 14:12
欣赏杨帆的精彩音画。这也是对口型唱歌的吗？

好像是，不过画面看起来挺凉爽，谢谢江南鼓励{:4_204:}

杨帆 发表于 2026-6-17 21:31

也曾年轻 发表于 2026-6-17 15:08


谢谢年轻老师鼓励，祝夏安{:4_190:}

杨帆 发表于 2026-6-17 21:32

梦油 发表于 2026-6-17 17:10
优美的意境，悦耳的歌声，太美了。谢谢杨帆朋友。

问好梦兄，谢谢鼓励，祝夏安{:4_190:}

红影 发表于 2026-6-17 21:48

好漂亮的制作，标题字漂亮，视频也很美妙。
欣赏杨帆好帖{:4_187:}

杨帆 发表于 2026-6-17 22:56

红影 发表于 2026-6-17 21:48
好漂亮的制作，标题字漂亮，视频也很美妙。
欣赏杨帆好帖

谢谢影子鼓励，祝夏安{:4_204:}

梦油 发表于 2026-6-18 14:08

杨帆 发表于 2026-6-17 21:32
问好梦兄，谢谢鼓励，祝夏安

杨帆朋友别客气。
页: [1]
查看完整版本: 心归云水间