我是动画新手,我目前正在尝试实现下面的效果:但是因为我想制作这些星星的动画,使其在您将鼠标悬停在它们上方时摆动,我发现我需要手动插入每颗星星,而不仅仅是插入这个全貌。有没有更快/更有效的方法来解决这个问题?我应该为此编写一个插入 js 函数吗? 谢谢!
最佳答案
您可能需要 Particles.js
A lightweight JavaScript library for creating particles.
用法很简单。
从 CDN 或本地加载库。我用过
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
使用
id="particles-js"
为粒子创建一个容器这样设计:
#particles-js { width: 100vw; height: 100vh; overflow: hidden; }
转到 the official page并设置你想要的任何设置
将设置导出为 json
在
<script>
中添加 json 内容在您的文档中添加标签。
响应式交互式演示:
particlesJS("particles-js", {
"particles": {
"number": {
"value": 200,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "star",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 35,
"height": 35
}
},
"opacity": {
"value": 0.35,
"random": true,
"anim": {
"enable": true,
"speed": .5,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.1,
"width": 1
},
"move": {
"enable": true,
"speed": .5,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 4024.6529723245903,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 150,
"size": 5,
"duration": 8,
"opacity": .2,
"speed": 3
},
"repulse": {
"distance": 100,
"duration": 5
},
"push": {
"particles_nb": 2
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
* {
margin: 0;
padding: 0;
}
#particles-js {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.stars,
.twinkle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: -10;
}
.stars {
background: #000 url(/image/SyeSl.png) repeat top center;
z-index: -1;
}
.twinkle {
background: transparent url(/image/q9Sz6.png) repeat top center;
z-index: -1;
animation: stars 1000s linear infinite;
}
@keyframes stars {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<div class="stars"></div>
<div class="twinkle"></div>
如果喜欢非交互式的东西,因为它可能具有更好的整体性能,可以实现更简单的版本,如下所示:
* {
margin: 0;
padding: 0;
}
.stars,
.twinkle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: -10;
}
.stars {
background: #000 url(/image/SyeSl.png) repeat top center;
z-index: -1;
}
.twinkle {
background: transparent url(/image/q9Sz6.png) repeat top center;
z-index: -1;
animation: stars 1000s linear infinite;
}
@keyframes stars {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
<div class="stars"></div>
<div class="twinkle"></div>
注意:背景中的小星星无耻偷自a pen by Annaliza Torres
关于javascript - 分散多个图像元素html的更快方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45875168/