逃脱引力

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #666 url('https://638183.freep.cn/638183/t23/webp2/ybli.webp') no-repeat center/cover; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; --state: paused; }
   
3.         #player { width: 300px; cursor: pointer; animation: rotating 18s linear infinite var(--state); }
   
4.         mov-ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: tan; animation: imov 6s infinite; }
   
5.         @keyframes moving {
   
6.                 from { opacity: 0; transform: translate(0,0); }
   
7.                 to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
   
8.         }
   
9.         @keyframes rotating { to { transform: rotate(360deg); } }
   
10. </style>
    
11. 
    
12. <div id="papa">
    
13.         <img id="player" src="https://638183.freep.cn/638183/web/svg/sunfl-1.svg" alt="" title="" />
    
14.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1996509752" autoplay loop></audio>
    
15. </div>
    
16. 
    
17. <script>
    
18. 
    
19. (function() {
    
20. 
    
21. let all = 100;
    
22. for(let i = 0; i < all; i++) {
    
23.         let movBall = document.createElement('mov-ball');
    
24.         let hudu = Math.PI / 180 * 360 / all * i;
    
25.         let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
    
26.         movBall.style.cssText += `
    
27.                 --x0: ${xx}px;
    
28.                 --y0: ${yy}px;
    
29.                 background: #${Math.random().toString(16).substr(-6)};
    
30.                 animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
    
31.         `;
    
32.         papa.prepend(movBall);
    
33. }
    
34. 
    
35. let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
    
36. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
37. aud.addEventListener('playing',mState,false);
    
38. aud.addEventListener('pause',mState,false);
    
39. player.addEventListener('click',playMusic,false);
    
40. 
    
41. })();
    
42. 
    
43. </script>

复制代码

朵拉

坐沙发，欣赏学习哈~

马黑黑

朵拉 发表于 2023-12-10 22:47
坐沙发，欣赏学习哈~

这个够简单的

朵拉

马黑黑 发表于 2023-12-10 22:48
这个够简单的

好，马上完成作业~~

马黑黑

朵拉 发表于 2023-12-10 22:56
好，马上完成作业~~

朵拉

马黑黑 发表于 2023-12-10 22:57

马师 学生已完成作业，望喜欢哈~~

红影

漂亮，那些粒子真的像渐渐逃离似的

红影

那蓝色背景是什么？是太空还是人的血液系统

马黑黑

朵拉 发表于 2023-12-10 23:02
马师 学生已完成作业，望喜欢哈~~

马黑黑

红影 发表于 2023-12-10 23:28
那蓝色背景是什么？是太空还是人的血液系统

原来是想用一个稍微恐怖一点的图片，后来想想还是算了，一张平和一点的

小文

很漂亮的构成

马黑黑

醉美水芙蓉 发表于 2023-12-11 11:54
欣赏老师新作品！

这个应该是超级简单的吧

红影

马黑黑 发表于 2023-12-10 23:32
原来是想用一个稍微恐怖一点的图片，后来想想还是算了，一张平和一点的

嗯嗯，平和的好，恐怖的会让人做噩梦的

冬天的雨

哈哈。。。应该可以直接套用，我的菜

冬天的雨

今天有电脑，争取今天完成作业

马黑黑

冬天的雨 发表于 2023-12-11 15:39
今天有电脑，争取今天完成作业

马黑黑

红影 发表于 2023-12-11 14:24
嗯嗯，平和的好，恐怖的会让人做噩梦的

白日做梦也没什么不好

马黑黑

冬天的雨 发表于 2023-12-11 15:38
哈哈。。。应该可以直接套用，我的菜