论坛 › 祝福礼堂 › 祝福：龙年大吉！

大猫咪 发表于 2024-2-12 11:20

祝福：龙年大吉！

<style>
#papa { position: relative; margin: 120px 0 0 calc(50% - 593px); width: 1024px; height: 995px; background: url('https://pic.imgdb.cn/item/65c98dd59f345e8d03322505.jpg') no-repeat center/cover, radial-gradient(transparent,tan); background-blend-mode: overlay; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; }
#papa img { position: absolute; cursor: pointer; mix-blend-mode: multiply; transform-origin: 50% 0; animation: swear 1s infinite alternate var(--state); }
#papa img:nth-of-type(1) { top: 40px; left: 60px; }
#papa img:nth-of-type(2) { top: 30; right: 0; }
li-zi { position: absolute; left: 340px; top: 300px; width: 15px; height: 15px; border-radius: 50%; background: gold; }
@keyframes moving { from { transform: rotate(0) translate(0,0); } to { transform: rotate(var(--deg)) translate(-540px,300px); } }
@keyframes swear { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1833963511" autoplay loop></audio>
      <img src="https://638183.freep.cn/638183/small/dgls1.jpg" alt="" />
      <img src="https://638183.freep.cn/638183/small/dgls2.jpg" alt="" />
</div>

<script>
var imgs = document.querySelectorAll('#papa > img');
var all = 36;
for(let i = 0; i < all; i++) {
      let lz = document.createElement('li-zi');
      lz.style.cssText += `
                --deg: ${Math.random() * -60}deg;
                opacity: ${Math.random()};
                animation: moving ${Math.random() * 4 + 4}s -${Math.random() * 4}s infinite var(--state);
      `;
      papa.prepend(lz);
}

var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused')) : (papa.style.setProperty('--state', 'running'));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
imgs.forEach(img => img.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

大猫咪 发表于 2024-2-12 11:21

祝福花潮的兄弟姐妹们龙年大吉！

大猫咪 发表于 2024-2-12 11:21

新的一年好运连连

大猫咪 发表于 2024-2-12 11:29

@马黑黑

谢谢黑黑的代码弄了半天的{:4_187:}{:4_185:}{:4_191:}{:4_176:}

红影 发表于 2024-2-12 11:30

还以为是黑黑的那个帖子呢，仔细看了看，是不同的龙呢。
这不怪我，天下的龙都长得太像了{:4_170:}

红影 发表于 2024-2-12 11:31

很热闹的祝福帖子，猫猫好久没来，看到你开心。过年好{:4_178:}

红影 发表于 2024-2-12 11:33

大猫咪 发表于 2024-2-12 11:21
祝福花潮的兄弟姐妹们龙年大吉！

也祝猫猫龙年大吉，健康快乐，事业有成{:4_177:}

大猫咪 发表于 2024-2-12 11:35

红影 发表于 2024-2-12 11:31
很热闹的祝福帖子，猫猫好久没来，看到你开心。过年好

红影新年快乐，忙了就来的少了，先忙过这阵再说{:4_179:}

小辣椒 发表于 2024-2-12 11:38

哇塞，猫猫出现了，祝猫猫新年快乐！

小辣椒 发表于 2024-2-12 11:39

漂亮的金龙吐珠，好喜庆的贺帖，赞哦{:4_178:}

小辣椒 发表于 2024-2-12 11:40

这龙年大吉的歌曲第一次听，好听{:4_208:}

四海八荒 发表于 2024-2-12 11:59

大吉大利，龙精虎猛

四海八荒 发表于 2024-2-12 12:00

龙吐珠，人兴旺

马黑黑 发表于 2024-2-12 12:03

大猫咪 发表于 2024-2-12 11:29
@马黑黑

谢谢黑黑的代码弄了半天的

不错，神龙见首又见尾{:4_170:}

流水光阴 发表于 2024-2-12 13:10

龙年大吉

流水光阴 发表于 2024-2-12 13:11

新春快乐，拜年了{:4_204:}

红影 发表于 2024-2-12 13:55

大猫咪 发表于 2024-2-12 11:35
红影新年快乐，忙了就来的少了，先忙过这阵再说

嗯嗯，盼着猫猫回来{:4_179:}

醉美水芙蓉 发表于 2024-2-12 13:59

樵歌 发表于 2024-2-12 14:32

进到大猫咪的贺贴里沾点皇城根儿的贵气{:4_174:}

樵歌 发表于 2024-2-12 14:35

大猫咪初三快乐，龙年多捉几只大老鼠{:4_170:}

查看完整版本: 祝福：龙年大吉！