前言
Particles库可以为我们实现一些很基础的粒子效果 在现在很多网站都在使用Three.js来进行3D效果 这个较老的库还是给之前学前端的我留下了很震撼的效果 但是以现在的眼光看 它多少还是有些简陋 并且配置很烦人 所以我把我见到的有些还行的效果的源码放在这里
使用方法也很简单 首先保证你安装了Particles库 然后更改其配置即可
如何使用
首先 使用npm安装需要的依赖
npm install particles.vue3 tsparticles --save
注意: 安装的版本有可能出现不一致 这两个的版本是需要保持一致的
版本越新越好 因为支持的内容变多了
然后创建一个用于展示粒子效果的Vue组件
<template>
<div style="width: 100vw; height: 100vh; pointer-events: none;">
<Particles id="tsparticles" :options="options" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded" style="pointer-events: none;" />
</div>
</template>
<script setup>
import { reactive,onMounted,onUnmounted } from 'vue';
import { loadFull } from "tsparticles";
const particlesInit = async (engine) => {
await loadFull(engine);
};
const particlesLoaded = (container) => {
console.log('Particles container loaded', container);
};
//替换提供的配置
const options=reactive({
}
);
</script>
<style scoped>
#tsparticles{
width: 100%;
height: 100%;
pointer-events: none;
}
</style>
之后只需要将下面提供的源码 粘贴到里面即可
源码和效果
经典升级款
我之前刚学html的时候 我看这个感觉真的无敌了 现在就…
const options=reactive({
fullScreen: {
enable: true,
},
particles: {
number: {
value: 80,
density: {
enable: true,
area: 800
}
},
color: {
value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
},
shape: {
type: "circle"
},
opacity: {
value: 1
},
size: {
value: { min: 1, max: 8 }
},
links: {
enable: true,
distance: 150,
color: "#808080",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 5,
direction: "none",
random: false,
straight: false,
outModes: "out"
}
},
interactivity: {
events: {
onHover: {
enable: true,
mode: "grab"
},
onClick: {
enable: true,
mode: "push"
}
},
modes: {
grab: {
distance: 140,
links: {
opacity: 1
}
},
push: {
quantity: 4
}
}
}
}
);
纸屑 也可以用作下雪
可以替换颜色 直接搜十六进制的其他颜色 并在代码注释区域替换即可 高版本的可以设置emoji 替换shape的type为emoji 然后设置value即可
const options=reactive({
fullScreen: {
enable: true,
},
particles: {
color: {
value: ["#ffffff"],//更改颜色
animation: {
enable: true,
speed: 30
}
},
move: {
direction: "bottom",
enable: true,
outModes: {
default: "out"
},
size: true,
speed: {
min: 1,
max: 3
}
},
number: {
value: 700,
density: {
enable: true
}
},
opacity: {
value: 1
},
rotate: {
value: {
min: 0,
max: 360
},
direction: "random",
move: true,
animation: {
enable: true,
speed: 60
}
},
tilt: {
direction: "random",
enable: true,
move: true,
value: {
min: 0,
max: 360
},
animation: {
enable: true,
speed: 60
}
},
shape: {
type: ["circle", "square", "polygon"],
options: {
polygon: [
{
sides: 5
},
{
sides: 6
}
]
}
},
size: {
value: {
min: 3,
max: 5
}
},
roll: {
darken: {
enable: true,
value: 30
},
enlighten: {
enable: true,
value: 30
},
enable: true,
speed: {
min: 15,
max: 25
}
},
wobble: {
distance: 30,
enable: true,
move: true,
speed: {
min: -15,
max: 15
}
}
}
}
);
星星跟随鼠标移动轨迹
比较遗憾的是 这里我的gif录制器没有录制到鼠标
const options=reactive({
fullScreen: {
enable: true,
},
name: "Mouse Trail",
particles: {
color: {
value: ["#ffe234", "#ffa534"]
},
move: {
outModes: "destroy",
enable: true,
speed: 6
},
opacity: {
value: {
min: 0.1,
max: 1
},
animation: {
enable: true,
speed: 3,
startValue: "max",
destroy: "min"
}
},
size: {
value: {
min: 3,
max: 7
}
},
shape: {
type: "star"
}
},
interactivity: {
events: {
onHover: {
enable: true,
mode: "trail"
}
},
modes: {
trail: {
delay: 0.01,
pauseOnStop: true
}
}
}
}
);
旋转的正方形
const options=reactive({
fullScreen: {
enable: true,
},
particles: {
stroke: {
width: 5,
color: {
value: [
"#5bc0eb",
"#fde74c",
"#9bc53d",
"#e55934",
"#fa7921",
"#2FF3E0",
"#F8D210",
"#FA26A0",
"#F51720"
]
}
},
shape: {
type: "square",
options: {
square: {
fill: false
}
}
},
rotate: {
value: 0,
direction: "counter-clockwise",
animation: {
enable: true,
speed: 2,
sync: true
}
},
size: {
value: { min: 1, max: 500 },
animation: {
enable: true,
startValue: "min",
speed: 60,
sync: true,
destroy: "max"
}
}
},
background: {
color: "#000"
},
emitters: {
direction: "top",
position: {
y: 50,
x: 50
},
rate: {
delay: 1,
quantity: 1
}
}
}
);
下雨
也可以用作下雪
const options=reactive({
fullScreen: {
enable: true,
},
particles: {
number: {
value: 100, // 雪花的数量
density: {
enable: true,
value_area: 800, // 控制雪花分布的密度
},
},
color: {
value: "#0000FF", // 白色和半透明白色，模拟不同透明度的雪花
},
shape: {
type: "circle", // 粒子形状为圆形
stroke: {
width: 0, // 圆形边缘无描边
color: "#0000FF",
},
polygon: {
nb_sides: 5,
},
image: {
src: "",
width: 100,
height: 100,
},
},
opacity: {
value: 0.5, // 基础不透明度，可调整雪花的透明程度
random: true, // 使雪花的透明度随机化
anim: {
enable: false, // 不启用透明度动画
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 5, // 雪花的大小
random: true, // 雪花大小随机
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: false, // 不需要连接线
},
move: {
enable: true,
speed: 8, // 雪花下落速度
direction: "bottom", // 方向设置为从上至下
random: false,
straight: true,
out_mode: "out",
},
},
interactivity: {
detect_on: "window",
events: {
onclick: {
enable: false,
mode: "push",
},
onhover: {
enable: false,
mode: "repulse",
},
resize: true,
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1,
},
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: {
distance: 200,
duration: 0.4,
},
push: {
particles_nb: 4,
},
remove: {
particles_nb: 2,
},
},
},
}
);
大光圈
const options=reactive({
fullScreen: { enable: true },
particles: {
number: {
value: 1, // 只需要一个粒子
},
size: {
value: { min: 100, max: 150 }, // 大圆圈的大小范围
},
color: {
value: ["rgba(214, 214, 210 , 0.75)"], // 半透明白色
},
move: {
enable: true,
speed: 8, // 移动速度
direction: 315, // 从左上到右下移动
outMode: "out", // 离开画布时销毁
},
},
interactivity: {
events: {
onClick: {
enable: false,
},
},
},
emitters: {
direction: 315,
rate: {
delay: 50,
quantity: 1,
}
}
}
);
喷泉
const options=reactive({
fullScreen: { enable: true },
fpsLimit: 60,
particles: {
number: {
value: 0
},
bounce: {
vertical: {
value: 0
}
},
color: {
value: "#5bc0eb"
},
collisions: {
enable: false
},
life: {
duration: {
sync: true,
value: 10
},
count: 1
},
opacity: {
value: 0.5
},
size: {
value: 3,
random: {
enable: true,
minimumValue: 1
}
},
move: {
enable: true,
gravity: {
enable: true
},
angle: {
value: 30
},
speed: 10,
outModes: {
bottom: "bounce",
top: "none",
default: "destroy"
},
trail: {
enable: true,
fillColor: "#000000",
length: 10
}
}
},
interactivity: {
detectsOn: "canvas",
events: {
resize: true
}
},
detectRetina: true,
background: {
color: "#000"
},
emitters: {
direction: "top",
life: {
count: 0,
duration: 0,
delay: 0
},
position: {
x: 50,
y: 20
},
rate: {
delay: 0.1,
quantity: 5
},
size: {
width: 0,
height: 0
}
}
}
);
最后
感谢你看到这里 给看到这里的读者一个额外的彩蛋 一个我感觉很流畅的加载动画 代码量少 效果还不错 看到这里了 给个关注吧~ 之后后端更新一些写项目的实用大小知识 前端更新一些问题日志和显示效果~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.loader {
display: inline-grid;
width: 50vmin;
aspect-ratio: 2;
box-shadow: 0 2vmin #574951;
overflow: hidden;
}
.loader:before {
content: "";
margin: 0 25%;
background: #83988E;
clip-path: polygon(97.55% 65.45%,50% 100%,2.45% 65.45%,20.61% 9.55%,79.39% 9.55%);
transform-origin: bottom;
animation:
l7-0 .5s linear infinite,
l7-1 3s steps(6) infinite;
}
@keyframes l7-0 {
0%{rotate: -36deg}
to{rotate: 36deg}
}
@keyframes l7-1 {
0%{translate: -174% 0}
to{translate: 174% 0}
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
