天地孤远任我行

马黑黑 · 发表于 2022-11-8 12:54

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

✿ 00:00 | 00:00

小辣椒 · 发表于 2022-11-8 12:59

我怕插队，等了一下再回帖

小辣椒 · 发表于 2022-11-8 13:02

这个粒子效果和前面那种不一样了，会集中后再散开

马黑黑 · 发表于 2022-11-8 13:08

小辣椒发表于 2022-11-8 13:02
这个粒子效果和前面那种不一样了，会集中后再散开

就在animation里加一个 alternate，表示往复运行。CSS很奇妙的。

小辣椒 · 发表于 2022-11-8 13:10

马黑黑发表于 2022-11-8 13:08
就在animation里加一个 alternate，表示往复运行。CSS很奇妙的。

这个集中再闪开是按外框图的样子吧？不能按自己设置尺寸大小？比如我想圆的。。。

马黑黑 · 发表于 2022-11-8 13:40

小辣椒发表于 2022-11-8 13:10
这个集中再闪开是按外框图的样子吧？不能按自己设置尺寸大小？比如我想圆的。。。

最简单的方法是把粒子加给一个圆形的元素，比如加给 #mama 而不是 #papa:

#mama {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%; /*圆形*/
overflow: hidden; /*防止溢出*/
}

然后，for语句添加粒子添加给 #mama:

(function() {
for(j=0; j<500; j++) {
let ele = document.createElement('span');
ele.className = 'stars';
ele.style.cssText += `
left: ${Math.random() * 400 + 450}px;
top: ${Math.random() * 80 + 100}px;
background: hsl(${Math.random() * 360}, ${Math.random() * 50 + 40}%,${Math.random() * 60 + 30}%);
box-shadow: 0 0 5px hsla(0,10%,100%,.25);
transform: rotate(${Math.random() * 360 + 360}deg) translate3d(${Math.random() * 400 + 100}px,${Math.random() * 300}px,${Math.random() * 900}px);
animation: move 100s infinite alternate ${-10 - Math.random() * 20}s linear;
`;
mama.appendChild(ele);
}
})();

当然，粒子的left和top值必须做相应修改，比方说left，原来的是这样：

left: ${Math.random() * 400 + 450}px;

显然超出了 mama 元素的尺寸，可以改为：

left: ${Math.random() * 100 + 150}px;

这样可以保证left的随机值在 150px 到 250px 之间。top值也做类似处理。还有，translate3d()函数里的参数尤其是头两个也要做相应修改，以使子元素的运动尽可能最大限度是在 400*400 的区域里（但运动中总会有溢出，溢出部分前面的#mama选择器已经不现实它们了）。