新春

马黑黑

马黑黑

代码

1. <style>
   
2. #papa { position: relative; margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/jpg/dragon.jpg') no-repeat center/cover, radial-gradient(transparent,tan); background-blend-mode: overlay; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; }
   
3. #papa img { position: absolute; cursor: pointer; mix-blend-mode: multiply; transform-origin: 50% 0; animation: swear 1s infinite alternate var(--state); }
   
4. #papa img:nth-of-type(1) { top: 100px; left: 40px; }
   
5. #papa img:nth-of-type(2) { top: 0; right: 0; }
   
6. li-zi { position: absolute; left: 310px; top: 220px; width: 20px; height: 20px; border-radius: 50%; background: gold; }
   
7. @keyframes moving { from { transform: rotate(0) translate(0,0); } to { transform: rotate(var(--deg)) translate(-540px,300px); } }
   
8. @keyframes swear { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
   
9. </style>
   
10. 
    
11. <div id="papa">
    
12.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1425315057" autoplay loop></audio>
    
13.         <img src="https://638183.freep.cn/638183/small/dgls1.jpg" alt="" />
    
14.         <img src="https://638183.freep.cn/638183/small/dgls2.jpg" alt="" />
    
15. </div>
    
16. 
    
17. <script>
    
18. var imgs = document.querySelectorAll('#papa > img');
    
19. var all = 36;
    
20. for(let i = 0; i < all; i++) {
    
21.         let lz = document.createElement('li-zi');
    
22.         lz.style.cssText += `
    
23.                 --deg: ${Math.random() * -60}deg;
    
24.                 opacity: ${Math.random()};
    
25.                 animation: moving ${Math.random() * 4 + 4}s -${Math.random() * 4}s infinite var(--state);
    
26.         `;
    
27.         papa.prepend(lz);
    
28. }
    
29. 
    
30. var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused')) : (papa.style.setProperty('--state', 'running'));
    
31. aud.addEventListener('pause', mState);
    
32. aud.addEventListener('playing',mState);
    
33. imgs.forEach(img => img.onclick = () => aud.paused ? aud.play() : aud.pause());
    
34. </script>

复制代码

朵拉

首席沙发，欣赏 金龙吐珠

朵拉

@马黑黑
提前祝马师 新春愉快，事事顺意

小九

黑黑除夕快乐！

上海朝阳

新春年健康快乐！

世外桃源

霸气的制作，中国龙一条

世外桃源

还有龙珠出来

世外桃源

欣赏老师的好精彩制作，高人的

世外桃源

提前祝老师新年快乐！

樵歌

龙头帖子

樵歌

龙年快乐

樵歌

龙年桃运

樵歌

龙凤呈祥

樵歌

金龙吐宝

樵歌

龙颜大悦

樵歌

龙腾盛世

樵歌

龙钟老态