东篱闲人 发表于 2022-10-3 20:37

黑黑快来。。。。。


<style>
      #papa { left: -214px; width: 1024px; height: 640px; background: #ccc url('https://pic1.imgdb.cn/item/633ad77716f2c2beb1428cad.gif') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
      #mplayer { position: absolute; width: 50px; height: 50px; left: 20px; top: 20px; border-radius: 50%; background: conic-gradient(hsla(0,100%,50%,.7),hsla(120,100%,50%,.7),hsla(240,100%,50%,.7),hsla(300,100%,50%,.7)); mask: radial-gradient(transparent 3px,red 0); -webkit-mask: radial-gradient(transparent 3px,red 0); cursor: pointer; animation: rot 4s linear infinite; animation-play-state: paused; }
      #lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(120,85%,40%,.75),hsla(0,70%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
      @keyframes cover1 { from { width: 0; } to { width: 100%; } }
      @keyframes cover2 { from { width: 0; } to { width: 100%; } }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <img src="/data/attachment/forum/202210/02/075010yyxllzknx5yxfx3o.gif" alt="" style="position: absolute; left: 25px; top: 8px; mix-blend-mode: multiply;" />
      <div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
      <div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29567193.mp3" autoplay= "autoplay"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr = [,,,,,,,,,,,,,,,,,,,,];

aud.loop = false;
mplayer.onclick = () => {
      aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (mplayer.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};
</script>

东篱闲人 发表于 2022-10-3 20:37

黑黑快来，俺会做歌词同步啦。。。。。。。{:4_170:}

马黑黑 发表于 2022-10-3 21:38

不是复制粘贴吧{:4_173:}

马黑黑 发表于 2022-10-3 21:39

自己做个歌词我就信{:4_173:}

小辣椒 发表于 2022-10-3 22:01

老头你居然把黑黑的修改自己的了{:4_189:}

小辣椒 发表于 2022-10-3 22:02

老头加油~~~自己做一次{:4_187:}

加林森 发表于 2022-10-3 22:16

有点晕，老兄这个这个。。。。{:4_203:}

红影 发表于 2022-10-3 22:43

底图还会变色的{:4_173:}

马黑黑 发表于 2022-10-4 07:47

小辣椒 发表于 2022-10-3 22:01
老头你居然把黑黑的修改自己的了

没有呀，除了歌词{:4_173:}

马黑黑 发表于 2022-10-4 07:48

红影 发表于 2022-10-3 22:43
底图还会变色的

模拟表演现场

小九 发表于 2022-10-4 10:41

这个色，变得挺有氛围{:4_199:}

大猫咪 发表于 2022-10-4 13:06

老头好制作，{:4_191:}图歌都喜欢。赞   {:4_179:}节日快乐！{:4_191:}

红影 发表于 2022-10-4 16:42

马黑黑 发表于 2022-10-4 07:48
模拟表演现场

嗯，假装灯光变化的效果{:4_173:}

东篱闲人 发表于 2022-10-4 16:54

马黑黑 发表于 2022-10-3 21:38
不是复制粘贴吧

你咋那么聪明呢。。。{:4_170:}

东篱闲人 发表于 2022-10-4 16:54

马黑黑 发表于 2022-10-3 21:39
自己做个歌词我就信

不整，累死。。。。

东篱闲人 发表于 2022-10-4 16:54

小辣椒 发表于 2022-10-3 22:01
老头你居然把黑黑的修改自己的了

就是抄。。。。。。。{:4_189:}

东篱闲人 发表于 2022-10-4 16:55

加林森 发表于 2022-10-3 22:16
有点晕，老兄这个这个。。。。

就是抄袭，咋地？{:5_115:}

东篱闲人 发表于 2022-10-4 16:56

小九 发表于 2022-10-4 10:41
这个色，变得挺有氛围

加点作料，掩盖痕迹。。。。{:5_117:}

东篱闲人 发表于 2022-10-4 16:56

大猫咪 发表于 2022-10-4 13:06
老头好制作，图歌都喜欢。赞   节日快乐！

抄现成的。。。。{:5_117:}

马黑黑 发表于 2022-10-4 17:01

东篱闲人 发表于 2022-10-4 16:54
不整，累死。。。。

{:4_172:}
页: [1] 2 3 4
查看完整版本: 黑黑快来。。。。。