醉美水芙蓉 发表于 2026-7-18 22:03:50

特效音画《远方在心里》

<meta charset="UTF-8">
<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: 10px -100px; width: 1286px; height: 720px; background: gray url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/609ad51efc1da991c58b164aebb83b0a_preview.webp) center/cover no-repeat; box-shadow:0 0px 0px 0px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}

#tp {left: 0%;top: 0%;z-index: 1;
      width: 100%;
      height:100%;
      position: absolute;
background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/609ad51efc1da991c58b164aebb83b0a_preview.webp)no-repeat center/cover;
}

.filtered-background {left: 0%;top: 0%;
position: absolute;z-index: 1;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 30% 100%, 45% 0, 66% 0, 56% 100%, 100% 100%, 100% 0%);
background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/609ad51efc1da991c58b164aebb83b0a_preview.webp)no-repeat center/cover;
filter: url("#turbulence")
}
li-zi { position: absolute; top: 0px; width: 80px; height: 50px; border-radius: 0%; background:url('https://pic1.imgdb.cn/i/033rToGKw51N56TWgU2gyp.webp ')no-repeat center/100% 100%; offset-path: path('M600 800 Q-500 150,1290 90'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 10s cubic-bezier(0,0.14,0,0.5) infinite var(--state),bs 1s infinite var(--state);z-index: 20; }
@keyframes fly { 100%{ offset-distance: 100%;} }
@keyframes bs { 50%{filter: hue-rotate(360deg)brightness(110%);} }

#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 80%;font:normal 3em "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; color:transparent; z-index: 21;writing-mode: vertical-lr;white-space: pre;transform: translateY(0%);filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc); width: 10%; height: 100%; text-align: center;animation: var(--motion) var(--tt) linear forwards,bs 1sinfinite; animation-play-state: var(--state); }
@keyframes cover1{0% {letter-spacing: -30px;
          opacity: 1; transform: scale(0);
          color:#ff0000;
        }
        50% {letter-spacing: 10px;
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {letter-spacing: 10px;
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {letter-spacing: 10px;
          opacity: 1; transform: scale(1);
           color:#00aa00;
        }
       
}
@keyframes cover2 {0% {letter-spacing: -30px;
          opacity: 1; transform: scale(0);
          color:#ff0000;
        }
        50% {letter-spacing: 10px;
          opacity: 1;color:#000078;
          transform: scale(1);
        }
        70% {letter-spacing: 10px;
          opacity: 1;color:#880000;
          transform: scale(1);
        }
       
        100% {letter-spacing: 10px;
          opacity: 1; transform: scale(1);
           color:#00aa00;
        }
       
}
#btnplay { top:68%; left:10%;z-index: 100;
display: block;position: absolute;
    width: 150px; height: 220px;
    background: url(https://pic1.imgdb.cn/i/0fYmlgLV4HogPAvFGkqVRQ.png)no-repeat center/300px 220px;
animation: heart-burst steps(2) 2s infinite;
animation-play-state: var(--state);
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -300px 0;}
}

#ptxt{width:100%;height:6px;font:800 18px/0px "STKaiti";color: #000;line-height:0px;bottom: 120px;left:15%;position: absolute;z-index: 110; }
#fullscreen{border-radius: 4px;position: absolute;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 100;
font:400 36px/0px "STKaiti";color: #fff;
border: none;
cursor: pointer;margin: 30px 35px;
}

</style>
<div id="papa">
<button id="fullscreen">全屏观赏</button>
<div id='tp'><div class="filtered-background"></div></div>
<svgid="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>

<divid="btnplay" ></div>
<div id="ptxt">0%</div>
<div id="lrc" data-lrc=""></div>
</div>
<audio id="aud" src="https://up.mediy.cn/%E8%BF%9C%E6%96%B9%E5%9C%A8%E5%BF%83%E9%87%8C_500dc0339e84cc3887f6d2889dd237a3.mp3
" autoplay loop></audio>

<script>
(function() {
        let mKey = 0, mFlag = true;
        let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
        let averAdd = 0, offset = 0;
        let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
        let geci = `远方在心里
作词：次仁彭措/扎青
作曲：次仁彭措
原唱：桑杰才让/扎西拉姆
和声：萨洛
混音：李成江
录音：央容阿东
监制：桑杰才让
编曲：俄金朋措
音乐制作人：次仁彭措
混音助理：成伟文凯
母带工程：九歌传媒兰州录音棚
OP：青海桑桑文化传媒有限公司
LRC编辑：醉美水芙蓉
我想带你去远方
拥抱那片山间的风
走过了你温暖的心房
听闻着远方有你的模样
我想陪你在远方
那是一个有你有我的地方
宁静宁静的夜空
星星的摇篮洒满月光
啊… རྒྱང་རིང་།
啊… རྒྱང་རིང་།
走过那片茫茫草原
随白云落在你的心间
啊…རྒྱང་རིང་།
远方在我的心里
啊…རྒྱང་རིང་།
远方在我的心里
我想带你去远方
拥抱那片山间的风
走过了你温暖的心房
听闻着远方有你的模样
我想陪你在远方
那是一个有你有我的地方
宁静宁静的夜空
星星的摇篮洒满月光
啊… རྒྱང་རིང་།
啊… རྒྱང་རིང་།
走过那片茫茫草原
随白云落在你的心间
啊…རྒྱང་རིང་།
远方在我的心里
啊…རྒྱང་རིང་།
远方在我的心里
啊…རྒྱང་རིང་།
远方在我的心里
谢谢欣赏！

`;
        let lrcAr = getLrcAr(geci);
        let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
        let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
        let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}
        function playing() {
lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
       
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
       
})();

new Array(total = 10).fill(0).map((i,k) => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${600 / total * k + 20}px;
               
                animation-delay: -${Math.random() * 20}s;
                --shadow: #${Math.random().toString(16).substring(1,1)};
        `;
        papa.prepend(i);
});


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)
                                //保留2位小数
                                document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
                               
                        });

(function() {
         var mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      };
      aud.onplaying = aud.onpause = () => mState();
btnplay.onclick = () => aud.paused ? (aud.play(),reflect.unpauseAnimations()):(aud.pause(),reflect.pauseAnimations());
})();


let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>




klxf 发表于 2026-7-19 14:08:14

效果漂亮，谢谢友友精彩分享

醉美水芙蓉 发表于 2026-7-19 21:39:19

klxf 发表于 2026-7-19 14:08
效果漂亮，谢谢友友精彩分享

谢谢友友光临！
页: [1]
查看完整版本: 特效音画《远方在心里》