论坛 › 音乐沙龙 › 你说世道怪不怪 TO：樵哥哥

小辣椒 发表于 2025-1-15 20:27

你说世道怪不怪 TO：樵哥哥

<style>
#bj {
    position: relative;
    margin: 140px 0 40px calc(50% - 781px);
    width: 1400px;
    height: 839px;
    overflow: hidden;
    background: url(https://xlaj.cn/upfile/2025/01/15/20a.jpg )no-repeat center / cover;
    border-radius: 32px;
}

#geci {
    --motion: cover2;
    --tt: 2s;
    --state: paused;
    --bg: #eee;
    position: absolute;
    left: 30%;
    transform: translate(-50%);
    top: 80%;
    font: 100 3.0em 华文隶书;
    color: #045738;
    white-space: pre;
    -webkit-background-clip: text;
    filter: drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);
}

#geci::before {
    position: absolute;
    content: attr(data-geci);
    width: 100%;
    height: 100%;
    color: transparent;
    overflow: hidden;
    white-space: pre;
    background: var(--bg);
    clip-path: inset(0 100% 0 0);
    -webkit-background-clip: text;
    animation: var(--motion) var(--tt) linear forwards;
    animation-play-state: var(--state);
}

@keyframes cover1 {
    to {
      clip-path: inset(0 0 0 0);
    }
}

@keyframes cover2 {
    to {
      clip-path: inset(0 0 0 0);
    }
}

#btnplay {
    width: 60px;
    height: 60px;
    cursor: pointer;
    left: 13%;
    top:29%;
    animation: rotating 6s infinite linear;
    position: absolute;
    background: url(https://xlaj.cn/upfile/2025/01/04/n7.png)no-repeat center / cover;
}

@keyframes rotating {
    to {
      transform: rotate(360deg);
    }
}

#dt2 {
    position: absolute;
    width: 32px;
    height: 32px;
}

#dt3 {
    position: absolute;
    width: 400px;
    height: 220px;
}

#dt4 {
    position: absolute;
    width: 150px;
    height: 150px;
}

#fullscreen {
    opacity: 1;
    position: absolute;
    width: 40px;
    height: 40px;
    top:36%;
    cursor: pointer;
    left: 20%;
    z-index: 40;
}

#bj:hover #fullscreen {
    opacity: 1;
}

#全屏 {
    width: 40px;
    height: 40px;
    position: absolute;
   
    background: url(https://xlaj.cn/upfile/2025/01/15/dak.png )no-repeat center/cover;
}

#退出 {
    width: 40px;
    height: 40px;
    position: absolute;
    opacity: 0;
    background: url(https://xlaj.cn/upfile/2025/01/15/tz.png)no-repeat center/cover;
}
</style>
<div id="bj">
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" style="top: 33%; left: 70%;" />
<img id="dt3" src="https://xlaj.cn/upfile/202411/12/4n.gif" alt="" style="top: 7%; left: 70%;" />
<img id="dt4" src="https://i.mp3.wf/218478129.gif " alt="" style="top: 22%; left: 19%;" />
<div id="btnplay" title="播放/暂停"></div>
<audio id="aud" src="https://xlaj.cn/upfile/2025/01/15/nssdgbg.m4a" loop autoplay></audio>
<div id="geci">你说世道怪不怪</div>
<span id="fullscreen" title="全屏展示/退出全屏">
    <div id="全屏"></div>
    <div id="退出"></div>
</span>
</div>
<script>
//--------------------------------------------------------------------------
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('6(\'d\'n c.a(\'2\')){j.l.q=b(){6(1.7){1.7.h.p(1.7);1.7=o;1.3.i=\'\'}6(1.9){1.8=1.9}};j.l.m=b(){g 2=c.a(\'2\');g 4=1.4,5=1.5;6(4&5){6(!1.9){1.9=1.8}2.4=4;2.5=5;2.3.k=1.3.k;2.3.f=1.3.f;2.d(\'z\').y(1,0,0,4,5);x{1.8=2.A("B/t")}s(e){1.r(\'8\');2.3.w=\'v\';1.h.u(2,1);1.3.i=\'0\';1.7=2}}}}',38,38,'|this|canvas|style|width|height|if|storeCanvas|src|storeUrl|createElement|function|document|getContext||top|var|parentElement|opacity|HTMLImageElement|left|prototype|stop|in|null|removeChild|play|removeAttribute|catch|gif|insertBefore|absolute|position|try|drawImage|2d|toDataURL|image'.split('|'),0,{}))
//----------------------------------------------------------------------------
let lrc = `你说世道怪不怪
歌手：李发发
你说世道怪不怪
有良心的一身债
缺德的人却自在
不要脸的万两财
山中早已无妖怪
全都跑到人间来
一样皮囊各样坏
心怀鬼胎怎么猜
我不会再受伤害
该说拜拜就拜拜
你好我就真心以待
你坏我也有人替代
我不会傻傻期待
也不会求谁偏爱
有风没风花一样开
有你没你我都精彩
我都一样精彩

山中早已无妖怪
全都跑到人间来
一样皮囊各样坏
心怀鬼胎怎么猜
我不会再受伤害
该说拜拜就拜拜
你好我就真心以待
你坏我也有人替代
我不会傻傻期待
也不会求谁偏爱
有风没风花一样开
有你没你我都精彩
我不会再受伤害
该说拜拜就拜拜
你好我就真心以待
你坏我也有人替代
我不会傻傻期待
不会求谁的偏爱
有风没风花一样开
有你没你我都精彩
我都一样精彩
谢谢欣赏

`;
aud.addEventListener("seeked", myFunction)
aud.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function 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));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      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);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}
aud.addEventListener('play', playing,false);
aud.addEventListener('pause', playing,false);
function playing() {
      geci.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.paused ? (dt2.stop(), dt3.stop(), dt4.stop()) : (dt2.play(), dt3.play(), dt4.play())
}
let lrcAr = getLrcAr(lrc);

btnplay.onclick = () => aud.paused ? (aud.play(),btnplay.style.animationPlayState = 'running') :( aud.pause(),btnplay.style.animationPlayState = 'paused');

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>

小辣椒 发表于 2025-1-15 20:29

@樵歌

樵哥哥这首歌不知道你会不会感兴趣，感觉和你学习的歌曲风格不一样{:4_173:}

小辣椒 发表于 2025-1-15 20:30

辫子哥哥说发了就提个建议，让你同一首@辫子哥哥

梦油 发表于 2025-1-15 20:57

李发发唱得好，歌词更好。

小辣椒 发表于 2025-1-15 20:59

梦油 发表于 2025-1-15 20:57
李发发唱得好，歌词更好。

梦油晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2025-1-15 21:01

@东篱闲人

老头你看看这个背景是不是单薄，我一个psd里面有几十个图片，然后一个图换个模式加个人物，基本几个图层就一个图，可以给我提提什么建议做出你那种质感的背景？

樵歌 发表于 2025-1-15 21:03

幸亏睡前来瞅一眼，居然有礼物。{:4_205:}{:4_179:}

樵歌 发表于 2025-1-15 21:06

小辣椒 发表于 2025-1-15 20:29
@樵歌

樵哥哥这首歌不知道你会不会感兴趣，感觉和你学习的歌曲风格不一样

流行风格，通俗唱法，还是用的气包声哈，可难和我的风格不大相同，我唱中音类的民歌要好点{:4_189:}

樵歌 发表于 2025-1-15 21:11

小辣椒 发表于 2025-1-15 20:30
辫子哥哥说发了就提个建议，让你同一首@辫子哥哥

明天出门单位团年，有联欢会，我要独唱两首歌，一首“枉凝眉”“画你”，合作一首“敖包相会”。等有时间，我练习一看看。{:4_189:}

小辣椒 发表于 2025-1-15 21:16

樵歌 发表于 2025-1-15 21:03
幸亏睡前来瞅一眼，居然有礼物。

樵哥哥来了

小辣椒 发表于 2025-1-15 21:17

樵歌 发表于 2025-1-15 21:06
流行风格，通俗唱法，还是用的气包声哈，可难和我的风格不大相同，我唱中音类的民歌要好点

没事，开心玩玩就可以了

小辣椒 发表于 2025-1-15 21:19

樵歌 发表于 2025-1-15 21:11
明天出门单位团年，有联欢会，我要独唱两首歌，一首“枉凝眉”“画你”，合作一首“敖包相会”。等有时间 ...
哇塞，首长的待遇真的好，樵哥哥还参加演唱，让别人录像，留个纪念

辫子哥哥 发表于 2025-1-15 22:26

小辣椒 发表于 2025-1-15 20:29
@樵歌

樵哥哥这首歌不知道你会不会感兴趣，感觉和你学习的歌曲风格不一样
小辣椒看不起樵歌，现在的樵歌什么歌曲都可以驾驭的

辫子哥哥 发表于 2025-1-15 22:27

小辣椒 发表于 2025-1-15 20:30
辫子哥哥说发了就提个建议，让你同一首@辫子哥哥

{:4_170:}，我马上回家了，回来上来欣赏，时间充裕 不急

辫子哥哥 发表于 2025-1-15 22:28

樵歌 发表于 2025-1-15 21:06
流行风格，通俗唱法，还是用的气包声哈，可难和我的风格不大相同，我唱中音类的民歌要好点

可以，春节回来后再上一首民歌

杨帆 发表于 2025-1-15 22:36

多动图控制精准、顺畅，谢谢小辣椒精彩分享{:4_204:}

红影 发表于 2025-1-15 22:46

好漂亮的制作，歌曲也好听。
欣赏亲爱的好帖，师兄收礼开心{:4_199:}

起个网名好难 发表于 2025-1-16 07:50

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

东篱闲人 发表于 2025-1-16 09:08

清爽唯美！{:4_204:}

东篱闲人 发表于 2025-1-16 09:10

小辣椒 发表于 2025-1-15 21:01
@东篱闲人

老头你看看这个背景是不是单薄，我一个psd里面有几十个图片，然后一个图换个模式加个人物， ...

也没什么特别啊，背景图选饱满一点的就好了啊。。。{:4_190:}

查看完整版本: 你说世道怪不怪 TO：樵哥哥