Javascript 快速分散多个图像项的方法html

我是动画新手，我目前正在尝试实现下面的效果：然而，因为我想给这些星星设置动画，让它们在你悬停在它们上方时摆动，我发现我需要手动插入每一颗星星，而不仅仅是插入整张图片。有没有更快/更有效的方法？我应该为此编写一个insert js函数吗？ 谢谢

---

您可以使用两张星星位置相同的图片。 第一张照片是这张照片，第二张照片是明亮的恒星，然后在短时间内交替出现

setInterval（函数（）{
$（'img'）.prop（'src'，'https://preview.ibb.co/kfbsWk/kpme4_brighter.png');
}, 200);
setTimeout（函数（）{
setInterval（函数（）{
$（'img'）.prop（'src'，'https://preview.ibb.co/fSHzBk/kpme4.png');
}, 200);
}, 100
);



您可能需要

用于创建粒子的轻量级JavaScript库


用法很简单

从CDN或本地加载库。我曾经


使用
id=“particles js”

这样做：

#粒子js{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}

转到并设置所需的任何设置

将设置导出为json

在文档中的
标记中添加json内容

响应式交互式演示：


particlesJS（“particlesJS”{
“粒子”：{
“编号”：{
“价值”：200，
“密度”：{
“启用”：正确，
“价值面积”：800
}
},
“颜色”：{
“值”：“#ffffff”
},
“形状”：{
“类型”：“星型”，
“笔划”：{
“宽度”：0，
“颜色”：“000000”
},
“多边形”：{
“nb_边”：5
},
“图像”：{
“src”：“img/github.svg”，
“宽度”：35，
“身高”：35
}
},
“不透明度”：{
“价值”：0.35，
“随机”：对，
“动画”：{
“启用”：正确，
“速度”：，
“不透明度最小值”：0.1，
“同步”：错误
}
},
“尺寸”：{
“价值”：4，
“随机”：对，
“动画”：{
“enable”：false，
“速度”：40，
“最小尺寸”：0.1，
“同步”：错误
}
},
“行链接”：{
“enable”：false，
“距离”：150，
“颜色”：“ffffff”，
“不透明度”：0.1，
“宽度”：1
},
“移动”：{
“启用”：正确，
“速度”：，
“方向”：“无”，
“随机”：对，
“直”：假，
“输出模式”：“输出”，
“反弹”：错误，
“吸引”：{
“启用”：正确，
“rotateX”：4024.6529723245903，
“rotateY”：1200
}
}
},
“互动性”：{
“在画布上检测”：“画布”，
“事件”：{
“悬停”：{
“启用”：正确，
“模式”：“气泡”
},
“onclick”：{
“启用”：正确，
“模式”：“拒绝”
},
“调整大小”：true
},
“模式”：{
“抓取”：{
“距离”：400，
“行链接”：{
“不透明度”：1
}
},
“泡沫”：{
“距离”：150，
“尺寸”：5，
“持续时间”：8，
“不透明度”：，
“速度”：3
},
“拒绝”：{
“距离”：100，
“持续时间”：5
},
“推送”：{
“粒子”：2
},
“删除”：{
“粒子”：2
}
}
},
“视网膜检测”：正确
});
*{
保证金：0；
填充：0；
}
#粒子js{
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.明星们，
.闪烁{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示：块；
z指数：-10；
}
.明星{
背景：#000 url(https://i.stack.imgur.com/SyeSl.png)重复上止点；
z指数：-1；
}
.闪烁{
背景：透明url(https://i.stack.imgur.com/q9Sz6.png)重复上止点；
z指数：-1；
动画：星星1000线性无限；
}
@为星星设置关键帧{
从{
背景位置：0；
}
到{
背景位置：-10000px 5000px；
}
}

当你将星星悬停在上面时，我想让星星摆动，抱歉，我应该更清楚。然后你肯定需要Js。将星星随机添加到页面中，将悬停事件附加到这些星星上，每次悬停图像时，将星星图像更改为适当的（更亮或旋转角度）.
我应该为此写一个insert js函数吗
-是