论坛 › 欢乐水吧 › 老虎节快乐

绿叶清舟 发表于 2024-3-6 14:09

老虎节快乐

<style>
    #papa { margin: 0 0 0 calc(50% - 633px); width: 1100px; height: 700px; background: #666 url('https://pic.imgdb.cn/item/65e806509f345e8d03dcfcb6.gif') no-repeat center/cover; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; z-index: 1; --state: paused; }
    #player { width: 100px; height: 100px; cursor: pointer; background: url('https://638183.freep.cn/638183/web/svg/3bb.svg') no-repeat center/cover; filter: brightness(200%) opacity(.8); animation: rotating 18s linear infinite var(--state); position: relative; }
    #player::before, #player::after { position: absolute; content: ''; width: 100%; height: 100%; background: inherit; transform: rotate(135deg); filter: invert(80%) opacity(.7); }
    #player::after { transform: rotate(60deg); filter: invert(100%) opacity(.5); }
    li-zi { position: absolute; width: 60px; height: 8px; border-radius: 100% 20%; background: tan; animation: imov 6s infinite; }
    @keyframes moving {
      from { opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); }
      to { opacity: 0; transform: translate(0,0) rotate(var(--deg)); }
    }
    @keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
    <div id="player" title="播放/暂停"></div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1952813633" autoplay loop></audio>
</div>

<script>

(function() {

let all = 160;
for(let i = 0; i < all; i++) {
    let movBall = document.createElement('li-zi');
    let hudu = Math.PI / 180 * 360 / all * i;
    let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
    movBall.style.cssText += `
      --x0: ${xx}px;
      --y0: ${yy}px;
      --deg: ${360 / all * i}deg;
      background: #${Math.random().toString(16).substr(-6)};
      animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
    `;
    papa.prepend(movBall);
}

let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

})();

</script>

樵歌 发表于 2024-3-6 15:11

这帖子我也喜欢，木有跟女神们争抢的意西哈{:4_196:}

樵歌 发表于 2024-3-6 15:13

是那个邓丽君唱的么，俺当年没少OK这曲儿{:4_189:}

梦油 发表于 2024-3-6 16:41

清舟朋友贺节帖子很风趣。祝清舟朋友节日快乐！

愤怒的葡萄 发表于 2024-3-6 17:05

这首歌曲葡萄倒是第一次听，邓丽君唱的？

南无月 发表于 2024-3-6 18:10

色彩好看，动画好看，元素都好看，歌好听。。{:4_199:}

小文 发表于 2024-3-6 19:25

小文认真查了下字典，《新华字典》、《现代汉语词典》里都没有老虎节，又查了《辞海》、《辞源》，还是没有呀！晕头转向了。{:4_187:}{:4_191:}

红影 发表于 2024-3-6 19:41

看得笑喷，女性是老虎，所以女神节就是老虎节了。清舟太有趣了{:4_170:}

红影 发表于 2024-3-6 19:41

图图右边的老虎太可爱了。愿天下的老虎们节日快乐{:4_199:}

绿叶清舟 发表于 2024-3-6 21:09

樵歌 发表于 2024-3-6 15:11
这帖子我也喜欢，木有跟女神们争抢的意西哈

这个可以抢了{:4_189:}

绿叶清舟 发表于 2024-3-6 21:10

樵歌 发表于 2024-3-6 15:13
是那个邓丽君唱的么，俺当年没少OK这曲儿

是李娜唱的

绿叶清舟 发表于 2024-3-6 21:10

梦油 发表于 2024-3-6 16:41
清舟朋友贺节帖子很风趣。祝清舟朋友节日快乐！

谢谢梦油，正好想起这首歌就做了{:4_173:}

绿叶清舟 发表于 2024-3-6 21:11

愤怒的葡萄 发表于 2024-3-6 17:05
这首歌曲葡萄倒是第一次听，邓丽君唱的？

李娜唱的，出家后她的歌基本听不到了

绿叶清舟 发表于 2024-3-6 21:11

南无月 发表于 2024-3-6 18:10
色彩好看，动画好看，元素都好看，歌好听。。

比三好还多一好啊{:4_189:}

绿叶清舟 发表于 2024-3-6 21:12

小文 发表于 2024-3-6 19:25
小文认真查了下字典，《新华字典》、《现代汉语词典》里都没有老虎节，又查了《辞海》、《辞源》，还是没有 ...

不好意思啊，劳烦你了{:4_189:}女人是老虎嘛，所以自命名老虎节了

绿叶清舟 发表于 2024-3-6 21:12

红影 发表于 2024-3-6 19:41
图图右边的老虎太可爱了。愿天下的老虎们节日快乐

红老虎节日快乐{:4_189:}

冬天的雨 发表于 2024-3-6 21:14

可惜，冬雨没有想到，应该用这个歌曲做贺帖的，只是冬雨做这个音乐小辣椒肯定会攻击的{:4_170:}

清舟用这个音乐没有问题的

冬天的雨 发表于 2024-3-6 21:14

欣赏清舟好制作{:4_199:}

冬天的雨 发表于 2024-3-6 21:15

借美帖祝福老虎们节日快乐{:4_172:}

红影 发表于 2024-3-6 21:57

绿叶清舟 发表于 2024-3-6 21:12
红老虎节日快乐

哈哈，绿老虎节日也快乐{:4_170:}

查看完整版本: 老虎节快乐