论坛 › 欢乐水吧 › 得意的笑(雷鬼版) - 阿啸

亚伦影音工作室 发表于 2026-6-27 12:32

得意的笑(雷鬼版) - 阿啸

本帖最后由 亚伦影音工作室 于 2026-6-27 12:35 编辑 <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");
      #bj {position:relative; overflow:hidden; width:1186px; height: 620px;border:2px solid #ccc; background-color:#800100;left:40%;transform:translate(-50%);font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";}
.containe{
   position:absolute;width: 100%;height: 100%;left: 0%;top: 0%;background: url(https://pic1.imgdb.cn/item/6a3f509b2546dff76d1b3edd.png) no-repeat center/cover;}
.filtered-background, .main-background {
position: absolute;
height: 100%;
width: 100%;clip-path: polygon(0% 0%, 0% 100%, 45% 100%, 42% 0, 62% 0, 42% 100%, 100% 100%, 100% 0%);
background:url(https://pic1.imgdb.cn/item/6a3f509b2546dff76d1b3edd.png) no-repeat center/cover;
}

.filtered-background {
filter: url("#turbulence");
}
#player {position:absolute;top: 0%;z-index: 98;
left: 38%;
width: 150px;
height: 150px;
display: grid;
        place-items: center;
animation: rot 8s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        width: 30%;
        height: 30%;
display: grid;
        place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#wrapper {
                position:absolute ; left:20%; bottom:30px;
                font:500 50px/0px "Ma Shan Zheng","STKaiti";
                letter-spacing:4px;cursor: pointer;
                color:#ff0000;
                white-space:pre;
             width:860px; height: 70px; text-align:center;
            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);

            z-index:2;
      }
      .char {
                display: inline-block;
                padding: 0px 2px;
                opacity: 0;
                transform: translate(var(--x), var(--y))rotate(270deg) ;
                animation: fadeIn 1.5s var(--delay) forwards,flas 0.5s linear infinite;
        }
       
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 0%);
                        opacity: 1;
                }

        }
        @keyframes flas {
                100% {filter: hue-rotate(360deg);}

        }
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   top: 5%; cursor: pointer;left: 5%;z-index: 140;}

#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="bj">
<div class="containe">
<div class="main-background">
</div>
<div class="filtered-background"></div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</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>
<div id="wrapper" >MP3带歌词播放器</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>

</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=3372341193.mp3" loop autoplay ></audio>
<script>
const gc = `
得意的笑(雷鬼版) - 阿啸
人生本来就是一出戏
恩恩怨怨又何必太在意
名和利啊
什么东西
生不带来死不带去
世事难料人间的悲喜
今生无缘来生再聚
爱与恨哪
什么玩意
船到桥头自然行
且挥挥袖莫回头
饮酒作乐是时候
那千金虽好
快乐难找
我潇洒走过条条大道
我得意的笑
又得意的笑
笑看红尘人不老
我得意的笑
又得意的笑
求得一生乐逍遥
我得意的笑
又得意的笑
把酒当歌趁今朝
我得意的笑
又得意的笑
求得一生乐逍遥
人生本来就是一出戏
恩恩怨怨又何必太在意
名和利啊
什么东西
生不带来死不带去
世事难料人间的悲喜
今生无缘来生再聚
爱与恨哪
什么玩意
船到桥头自然行
且挥挥袖莫回头
饮酒作乐是时候
那千金虽好
快乐难找
我潇洒走过条条大道
我得意的笑
又得意的笑
笑看红尘人不老
我得意的笑
又得意的笑
求得一生乐逍遥
我得意的笑
又得意的笑
把酒当歌趁今朝
我得意的笑
又得意的笑
求得一生乐逍遥/name/.lrc
`;
const gcAr = lrc2HC(gc);
let curkey = 1, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 1;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? 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;
let 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 ? -600 : 600);
const y = Math.random() * (Math.random() > 0.5 ? 0 : 0);
span.style.cssText += `
color: #${Math.random().toString(11).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);
}
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',reflect.unpauseAnimations()) :( aud.pause(),player.style.animationPlayState = 'paused',reflect.pauseAnimations());
let fs= true;
fullscreen.onclick = () => {
      fs ? (bj.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script>

红影 发表于 2026-6-27 13:33

漂亮的水波纹背景，小播也漂亮，设计成了美女的发夹，真漂亮。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-6-27 23:10

好听好看，欣赏学习，谢谢亚伦老师精彩示范{:4_180:}

查看完整版本: 得意的笑(雷鬼版) - 阿啸