论坛 › 欢乐水吧 › 踏马寻花向自由-半吨兄弟

亚伦影音工作室 发表于 2026-7-24 09:00

踏马寻花向自由-半吨兄弟

本帖最后由 亚伦影音工作室 于 2026-7-24 22:03 编辑 <br /><br /><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 0 10px calc(10% - 390px);
        display: grid;
        place-items: center;
        width: 1286px;
        height: 720px;
        background-color: #740707;
        box-shadow: 3px 3px 20px #000;
        user-select: none;
        overflow: hidden;
        position: relative;
        z-index: 1;--state: running;
}
#tp{position:absolute;width: 100%;height: 100%;left: 0%;top: 0%;background: url(https://pic1.imgdb.cn/i/033ukyHxIVddYtDXVC1ugB.png) no-repeat center/cover;}
.filtered-background {
position: absolute;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 60% 0, 60% 0, 89% 100%, 100% 100%, 100% 0%);
background:url(https://pic1.imgdb.cn/i/033ukyHxIVddYtDXVC1ugB.png) no-repeat center/cover;
filter: url("#turbulence")
}



#lrc { --motion: cover2; --tt: 2s; position: absolute;top: 82%; left: 30%;font:normal 2.8em "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif"; color:transparent; z-index: 21;white-space: pre;transform: translateX(-50%);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: 100%; height: 10%; text-align: center;animation: var(--motion) var(--tt) linear forwards,bs 1sinfinite; animation-play-state: var(--state); }
@keyframes cover1{0% {transform: perspective(1em)rotate(40deg) translateY(-1000px)translateX(500px);
          color:#ff0000;
        }
       
       
        60% {transform: perspective(16em)rotate(0deg) translate(0px);
          opacity: 1;color:#000078;
          
        }
        100% {transform: perspective(26em)rotate(0deg) translate(300px);
           color:#00aa00;
        }
       
}
@keyframes cover2 {0% {transform: perspective(1em)rotate(-100deg) translateY(-800px)translateX(0px);
          color:#ff0000;
        }
       
       
        60% {transform: perspective(16em)rotate(0deg) translate(600px);
          opacity: 1;color:#000078;
          
        }
        100% {transform: perspective(26em)rotateX(0deg) translate(300px);
           color:#00aa00;
        }
       
}
#btnplay { top:60%; left:86%;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: 22%;left:90%;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: 0px 0px;top:6%; left:6%;
}
</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="2 5"></feTurbulence>
    <feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
      <animate xlink:href="#ripples" attributeName="baseFrequency" dur="10s" keyTimes="0;0;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="http://music.163.com/song/media/outer/url?id=3405360137.mp3" autoplay loop></audio>

<script>



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>

<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 = `踏马寻花向自由
作词Lyrics: 疯狂的羊/作曲Composer: 郭仔
演唱Vocal: 半吨兄弟
我自有节奏天高任我游
我要逃离世俗的烦忧
命运的岔路口到底往哪走
随着微风四处去漂流
想喝李白的酒醉倒那忧愁
想与杜甫畅聊人生自由
随云朵去漫游跟鸟儿招招手
举杯邀明月叫三两好友
就别管那么多踏马肆意挥霍
岁月不过是一场蹉跎
不必计较太多世俗的对与错
去看向阳花开满那山坡
去远方摘一朵叫自由的花朵
纵马高歌肆意潇洒的活
燃篝火哼着歌找月儿陪着我
抛开世俗去找回那自我
想喝李白的酒醉倒那忧愁
想与杜甫畅聊人生自由
随云朵去漫游跟鸟儿招招手
举杯邀明月叫三两好友
就别管那么多踏马肆意挥霍
岁月不过是一场蹉跎
不必计较太多世俗的对与错
去看向阳花开满那山坡
去远方摘一朵叫自由的花朵
纵马高歌肆意潇洒的活
燃篝火哼着歌找月儿陪着我
抛开世俗去找回那自我

`;
        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;}}});
       
})();

</script>

杨帆 发表于 2026-7-24 13:37

漂亮~谢谢亚伦老师精彩分享{:4_190:}

梦油 发表于 2026-7-24 16:52

字幕设计引人注目。问好亚伦。

小辣椒 发表于 2026-7-24 23:29

亚纶看见你的歌词出来很新颖，但我看不见你的背景图，老这样你的背景图我看不见，一方面我网卡，再发现你的图片文件太大了

查看完整版本: 踏马寻花向自由-半吨兄弟