虫鸣
本帖最后由 马黑黑 于 2023-6-30 19:26 编辑 <br /><br /><style>#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; }
#mplayer { position: absolute;left: 48%; bottom: 4%; font: bold 60px/60px sans-serif; cursor: pointer; opacity: .7; animation: rot 6s infinite linear var(--state); }
.pts { position: absolute;display: block;top: 0;left: 0;z-index: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<canvas class="pts"></canvas>
<div id="mplayer">🍃</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=422428199" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/particles2.2.2.min.js';
document.head.appendChild(script);
window.onload = () => {
let colors = Array.from({length:20}, (v) => '#' + Math.random().toString(16).substr(-6));
let particles = Particles.init({
selector: '.pts',
maxParticles: 120,
sizeVariations: 4,
color: colors
});
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), particles.pauseAnimation()) : (papa.style.setProperty('--state','running'), particles.resumeAnimation());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
};
})();
</script>
帖子代码
<style>
#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; }
#mplayer { position: absolute;left: 48%; bottom: 4%; font: bold 60px/60px sans-serif; cursor: pointer; opacity: .7; animation: rot 6s infinite linear var(--state); }
.pts { position: absolute;display: block;top: 0;left: 0;z-index: 0; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<canvas class="pts"></canvas>
<div id="mplayer">🍃</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=422428199" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/particles2.2.2.min.js';
document.head.appendChild(script);
window.onload = () => {
let colors = Array.from({length:20}, (v) => '#' + Math.random().toString(16).substr(-6));
let particles = Particles.init({
selector: '.pts',
maxParticles: 120,
sizeVariations: 4,
color: colors
});
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), particles.pauseAnimation()) : (papa.style.setProperty('--state','running'), particles.resumeAnimation());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
};
})();
</script>
下面按钮是只小虫虫吧{:4_170:} 本帖尝试使用 particles 粒子组件做背景修饰。该库仅 7 Kb ，此版本的功能也相对简单，稳定性还有不足。
particles.js 官网：https://marcbruederlin.github.io/particles.js/ 啊，，我插队了 particles 实际上是对 canvas 画布的封装。它的早前的一些版本（比如2.0）功能相对强大，20多Kb的身材。
particles 的不足主要在稳定性，但对不太会操作canvas的小盆友来说，简单版本的粒子效果可以用用。 手机瞄一眼{:4_173:}
夜幕下，有点点繁星，寂静的空旷下面几只虫虫在觅食，吃饱了就尽情的放声歌唱，啦啦啦啦啦 手机瞄一眼{:4_173:}
夜幕下，有点点繁星，寂静的空旷下面几只虫虫在觅食，吃饱了就尽情的放声歌唱，啦啦啦啦啦 小辣椒 发表于 2023-6-30 19:36
手机瞄一眼
夜幕下，有点点繁星，寂静的空旷下面几只虫虫在觅食，吃饱了就尽情的放声歌唱，啦啦 ...
那么浪漫的解读{:4_170:} 小辣椒 发表于 2023-6-30 19:31
啊，，我插队了
知青{:4_170:} 马黑黑 发表于 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
下面按钮是只小虫虫吧
{:4_203:} 马黑黑 发表于 2023-6-30 20:09
网速不好，或手快，点了两次
手机的 马黑黑 发表于 2023-6-30 20:09
知青老值钱了
那升级知青要祝贺一下自己{:4_170:} 马黑黑 发表于 2023-6-30 20:10
主要没有看清楚{:4_170:}
感觉是叶子上一只爬爬虫 黑黑又带来新的东西，下面那个像一片带着卷曲叶柄的小叶子，真奇特{:4_187:} 马黑黑 发表于 2023-6-30 19:33
particles 实际上是对 canvas 画布的封装。它的早前的一些版本（比如2.0）功能相对强大，20多Kb的身材。
...
20多Kb也不算大啊，只是它的语句完全看不懂呢{:4_173:}