虫鸣

马黑黑

🍃

马黑黑

帖子代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #eee url('https://638183.freep.cn/638183/t23/webp1/ismk.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; --state: paused; }
   
3. #mplayer { position: absolute;  left: 48%; bottom: 4%; font: bold 60px/60px sans-serif; cursor: pointer; opacity: .7; animation: rot 6s infinite linear var(--state); }
   
4. .pts { position: absolute;display: block;top: 0;left: 0;z-index: 0; }
   
5. @keyframes rot { to { transform: rotate(360deg); } }
   
6. </style>
   
7. 
   
8. <div id="papa">
   
9.         <canvas class="pts"></canvas>
   
10.         <div id="mplayer">&#127811;</div>
    
11. </div>
    
12. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=422428199" autoplay="autoplay" loop="loop"></audio>
    
13. 
    
14. <script>
    
15. (function() {
    
16.         let script = document.createElement('script');
    
17.         script.src = 'https://638183.freep.cn/638183/web/api/particles2.2.2.min.js';
    
18.         document.head.appendChild(script);
    
19. 
    
20.         window.onload = () => {
    
21.                 let colors = Array.from({length:20}, (v) => '#' + Math.random().toString(16).substr(-6));
    
22.                 let particles = Particles.init({
    
23.                         selector: '.pts',
    
24.                         maxParticles: 120,
    
25.                         sizeVariations: 4,
    
26.                         color: colors
    
27.                 });
    
28.                 let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), particles.pauseAnimation()) : (papa.style.setProperty('--state','running'), particles.resumeAnimation());
    
29.                 aud.addEventListener('play', mState, false);
    
30.                 aud.addEventListener('pause', mState, false);
    
31.                 mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
32.         };
    
33. })();
    
34. </script>
    

复制代码

小辣椒

下面按钮是只小虫虫吧

马黑黑

本帖尝试使用 particles 粒子组件做背景修饰。该库仅 7 Kb ，此版本的功能也相对简单，稳定性还有不足。

particles.js 官网：https://marcbruederlin.github.io/particles.js/

小辣椒

啊，，我插队了

马黑黑

particles 实际上是对 canvas 画布的封装。它的早前的一些版本（比如2.0）功能相对强大，20多Kb的身材。

particles 的不足主要在稳定性，但对不太会操作canvas的小盆友来说，简单版本的粒子效果可以用用。

小辣椒

手机瞄一眼
夜幕下，有点点繁星，寂静的空旷下面几只虫虫在觅食，吃饱了就尽情的放声歌唱，啦啦啦啦啦

小辣椒

手机瞄一眼
夜幕下，有点点繁星，寂静的空旷下面几只虫虫在觅食，吃饱了就尽情的放声歌唱，啦啦啦啦啦

马黑黑

小辣椒 发表于 2023-6-30 19:36
手机瞄一眼
夜幕下，有点点繁星，寂静的空旷下面几只虫虫在觅食，吃饱了就尽情的放声歌唱，啦啦 ...

那么浪漫的解读

马黑黑

小辣椒 发表于 2023-6-30 19:31
啊，，我插队了

知青

小辣椒

马黑黑 发表于 2023-6-30 20:00
知青

哈哈，插队也是不小心的，一下子升级了知青也是不错的

小辣椒

马黑黑 发表于 2023-6-30 19:43
那么浪漫的解读

怎么回了二次，自己都没有感觉的

马黑黑

小辣椒 发表于 2023-6-30 20:04
怎么回了二次，自己都没有感觉的

网速不好，或手快，点了两次

马黑黑

小辣椒 发表于 2023-6-30 20:04
哈哈，插队也是不小心的，一下子升级了知青也是不错的

知青老值钱了

马黑黑

小辣椒 发表于 2023-6-30 19:30
下面按钮是只小虫虫吧

小辣椒

马黑黑 发表于 2023-6-30 20:09
网速不好，或手快，点了两次

手机的

小辣椒

马黑黑 发表于 2023-6-30 20:09
知青老值钱了

那升级知青要祝贺一下自己

小辣椒

马黑黑 发表于 2023-6-30 20:10

主要没有看清楚

感觉是叶子上一只爬爬虫

红影

黑黑又带来新的东西，下面那个像一片带着卷曲叶柄的小叶子，真奇特

红影

马黑黑 发表于 2023-6-30 19:33
particles 实际上是对 canvas 画布的封装。它的早前的一些版本（比如2.0）功能相对强大，20多Kb的身材。

...

20多Kb也不算大啊，只是它的语句完全看不懂呢