论坛 › 欢乐水吧 › 满盘皆输 歌手：胖球鱼 TO：黑黑

小辣椒 发表于 2024-6-18 22:07

满盘皆输 歌手：胖球鱼 TO：黑黑

<style>
#tz { margin: 130px 0 30px calc(50% - 721px); width: 1280px; height: 650px; background: url('https://wj.zp68.com/lxx/yunhua/2024/06/18/3.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; z-index: 1; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; top: 15px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; text-shadow: 2px 2px 2px rgba(0,0,0,.8); background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; }
#player { left: 50%; top: 30%; width: 120px; height: 120px; filter: drop-shadow(0 0 50px white); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
#player:hover { width: 200px; }
c-c { position: absolute; width: 85%; height: 30px; border: 12px double plum; border-radius: 50%; opacity: .75; }
@keyframes rot { to { transform: rotate(1turn); } }

#dt2{ position: absolute; width:276px; height: 110px; top: 488px; left: 858px; }
#dt3{ position: absolute; width: 150px; height: 119px; top: 508px; left: 432px; }
#dt4{ position: absolute; width: 150px; height: 119px; top: 527px; left: 487px; }
#dt5{ position: absolute; width: 32px; height: 32px; top: 75px; left: 925px; }

</style>

<div id="tz" data-lrc="满盘皆输 - 胖球鱼">
      <audio id="aud" src="https://disk.111t.net/filestores/2024/07/26/374a3807d80da23e693b5e36ce7d2ed3.mp3" autoplay loop></audio>

<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2024/06/18/yjx.gif"alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt3" src="https://wj.zp68.com/lxx/yunhua/2024/06/18/xmf.gif" alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt4" src="https://wj.zp68.com/lxx/yunhua/2024/06/18/xmf.gif" alt=""style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />
<img id="dt5" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" alt="" />


      <div id="player"></div>
</div>

<script>
var curkey = 0, lrcAr = [], total = 6;
Array.from({length: total}).forEach((c,k) => {
      c = document.createElement('c-c');
      c.style.cssText += `
                transform: rotate(${360 / total * k}deg);
                border-color: #${Math.random().toString(16).substring(2,8)};
      `;
      player.appendChild(c);
});
var getAr = (text) => {
      var ar = text.trim().split('\n');
      ar.sort();
      var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
      ar.forEach(item => {
                let result = item.match(reg);
                let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                lrcAr.push(.trim()]);
      });
};
var mState = () => {
      tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
      player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
      if(curkey > lrcAr.length - 1) return;
      if(aud.currentTime >= lrcAr) {
                tz.dataset.lrc = lrcAr;
                curkey ++;
      }
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = `满盘皆输 - 胖球鱼\n作词：凌一\n作曲：杨嘉皓\n每次从梦中醒来\n你的身影已不在\n全都是记忆里的残骸\n哭着求你别离开\n没人能把你替代\n可你早已经置身事外\n如果真情被辜负\n就当真心被错付\n为何我还要执迷不悟\n我不被命运眷顾\n半生飘零没归宿\n深情从开始就是个错误\n我拿青春作赌注\n为你付出了全部\n最后却输得一塌糊涂\n为了你受过的苦\n都是我作茧自缚\n可笑的是你从不在乎\n我拿真心作赌注\n赌你不会让我输\n最后却换来伤痕无数\n不甘心也没退路\n感情早已经落幕\n一厢情愿满盘皆输\n~Music~\n如果真情被辜负\n就当真心被错付\n为何我还要执迷不悟\n我不被命运眷顾\n半生飘零没归宿\n深情从开始就是个错误\n我拿青春作赌注\n为你付出了全部\n最后却输得一塌糊涂\n为了你受过的苦\n都是我作茧自缚\n可笑的是你从不在乎\n我拿真心作赌注\n赌你不会让我输\n最后却换来伤痕无数\n不甘心也没退路\n感情早已经落幕\n一厢情愿我满盘皆输\n谢谢欣赏`;
getAr(lrc);
</script>

小辣椒 发表于 2024-6-18 22:08

@马黑黑

黑黑，纯套用的{:4_170:}

小辣椒 发表于 2024-6-18 22:10

谢谢黑黑的精美礼物，套用个代码，还可以顺带还礼。{:4_189:}

小辣椒 发表于 2024-6-18 22:11

但时间紧我得赶快下，明天要出去就加的素材太少了，笑纳啊

马黑黑 发表于 2024-6-18 22:17

胖球鱼是左边这姑凉吗{:4_170:}

南无月 发表于 2024-6-18 22:42

漂亮的，这个小播放中间了，触碰可变大，效果完美。。{:4_170:}

南无月 发表于 2024-6-18 22:42

我只看得到小播，看不到背景哈。。怪了怪了。。{:4_170:}

红影 发表于 2024-6-18 23:37

漂亮的制作，亲爱的真快，又一个呢。
这个里面效果也不少呢，小蜜蜂、小花朵、还有亮闪闪的小星星，好漂亮{:4_199:}

梦油 发表于 2024-6-19 09:22

看着小蜜蜂的移动方向，是要追逐郁金香啊。

樵歌 发表于 2024-6-19 10:33

有创意有创意，雾里看花花。有郁金香、合子莲，美人花。。。马大师估计喜欢后面那朵花花。

老谟深虑 发表于 2024-6-19 11:17

         欣赏老师的精美音画，点赞！

小辣椒 发表于 2024-6-21 22:06

马黑黑 发表于 2024-6-18 22:17
胖球鱼是左边这姑凉吗

哈哈~~~你看看像吗{:4_170:}

小辣椒 发表于 2024-6-21 22:07

南无月 发表于 2024-6-18 22:42
漂亮的，这个小播放中间了，触碰可变大，效果完美。。

谢谢月月欣赏，小辣椒是直接套用黑黑代码的

小辣椒 发表于 2024-6-21 22:08

南无月 发表于 2024-6-18 22:42
我只看得到小播，看不到背景哈。。怪了怪了。。

月月你浏览器有问题了，去修复一下

小辣椒 发表于 2024-6-21 22:08

红影 发表于 2024-6-18 23:37
漂亮的制作，亲爱的真快，又一个呢。
这个里面效果也不少呢，小蜜蜂、小花朵、还有亮闪闪的小星星，好漂亮 ...

亲爱的，套用肯定快的{:4_170:}

小辣椒 发表于 2024-6-21 22:09

梦油 发表于 2024-6-19 09:22
看着小蜜蜂的移动方向，是要追逐郁金香啊。

哈哈，梦油看的仔细，有点这个味道的

小辣椒 发表于 2024-6-21 22:10

樵歌 发表于 2024-6-19 10:33
有创意有创意，雾里看花花。有郁金香、合子莲，美人花。。。马大师估计喜欢后面那朵花花。

樵哥哥晚上好，小辣椒是套用黑黑代码玩一个

小辣椒 发表于 2024-6-21 22:10

老谟深虑 发表于 2024-6-19 11:17
欣赏老师的精美音画，点赞！

问好老谟，谢谢欣赏{:4_187:}

马黑黑 发表于 2024-6-21 22:18

小辣椒 发表于 2024-6-21 22:06
哈哈~~~你看看像吗

有点呢

小辣椒 发表于 2024-6-21 22:26

马黑黑 发表于 2024-6-21 22:18
有点呢

黑黑，太佩服你了，回帖的速度太快了，我那边还没有回好，你这里已经回复了

查看完整版本: 满盘皆输 歌手：胖球鱼 TO：黑黑