小辣椒 发表于 2024-2-9 23:39

黑黑新年快乐！

<style>
#papa { position: relative; margin: 150px 0 0 calc(50% - 803px); width: 1440px; height: 800px; background: url(' https://xlaj.cn/assets/file/zp/20240210001613.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: 690px; top: 200px; width: 20px; height: 20px; 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://wj.zp68.com/lxx/yunhua/2022/01/28/01.mp3" 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-9 23:40

套一个黑黑的新春代码@马黑黑

祝黑黑新年快乐！

小辣椒 发表于 2024-2-9 23:40

龙珠加的太漂亮了{:4_170:}

小辣椒 发表于 2024-2-9 23:41

给小宝宝来年财运送一点

小辣椒 发表于 2024-2-9 23:42

这条龙像变色龙，不够强大，不够武威，但很妖娆，这条应该是美女龙{:4_170:}

小辣椒 发表于 2024-2-9 23:44

也祝福大家新年快乐！

醉美水芙蓉 发表于 2024-2-10 08:07

醉美水芙蓉 发表于 2024-2-10 08:07

小星世龙 发表于 2024-2-10 09:12

大年初一，给诗友拜年！
龙年吉祥，阖家幸福，万事如意！

亦是金 发表于 2024-2-10 10:28

祝福小辣椒新年快乐，大吉如意！{:4_187:}

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

这个换了龙还有背景呢，看着更欢乐了。欣赏亲爱的好帖。黑黑收礼开心{:4_187:}

冬天的雨 发表于 2024-2-10 11:40

小辣椒 发表于 2024-2-9 23:42
这条龙像变色龙，不够强大，不够武威，但很妖娆，这条应该是美女龙

美女龙{:4_170:}

冬天的雨 发表于 2024-2-10 11:41

小辣椒新年快乐{:4_197:}{:4_185:}

冬天的雨 发表于 2024-2-10 11:42

马老师新年快乐，收礼开心{:4_187:}

马黑黑 发表于 2024-2-10 13:20

小辣椒 发表于 2024-2-9 23:40
套一个黑黑的新春代码@马黑黑

祝黑黑新年快乐！

这个制作太漂亮了！
新年好！
页: [1]
查看完整版本: 黑黑新年快乐！