使用HTML+CSS+JS 实现粒子动画
- 1 设置网页的样式
- 2 移动鼠标生成粒子
- 3 为每个粒子生成随机颜色属性
- 4 让粒子动起来
- 5 让粒子在垂直方向随机向上或向下移动
- 6 为粒子设置生命周期，销毁过期粒子
- 7 让粒子的颜色，跟随生命周期变化（淡出效果）
- 8 完整代码
1 设置网页的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标的粒子尾巴</title>
</head>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: black;
position: relative;
overflow: hidden;
}
.particle {
width: 4px;
height: 4px;
left: 0;
top: 0;
border-radius: 50%;
position: absolute;
background: red;
}
</style>
<body>
</body>
</html>2 移动鼠标生成粒子
window.onmousemove = function (e) {
var particle = document.createElement('div')
particle.className = 'particle'
particle.style.left = e.clientX + 'px'
particle.style.top = e.clientY + 'px'
document.body.appendChild(particle)
}3 为每个粒子生成随机颜色属性
function getRandColor() {
return 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')'
}
window.onmousemove = function (e) {
var particle = document.createElement('div')
particle.className = 'particle'
particle.setAttribute('bgcolor', getRandColor())
document.body.appendChild(particle)
}4 让粒子动起来
window.onmousemove = function (e) {
var particle = document.createElement('div')
particle.className = 'particle'
particle.setAttribute('bgcolor', getRandColor())
var speedX = Math.random() * 1.5
var speedY = Math.random() * 0.75 * 1.5
particle.setAttribute('speedX', speedX)
particle.setAttribute('speedY', speedY)
particle.style.left = e.clientX + 'px'
particle.style.top = e.clientY + 'px'
// 将粒子添加到网页当中
document.body.appendChild(particle)
}
// 运动函数
function run() {
// 获取所有粒子
var particles = document.getElementsByClassName('particle')
// 开始遍历
for (var i = 0; i < particles.length; i++) {
// 获取粒子的水平、垂直方向的运动速度
var speedX = particles[i].getAttribute('speedX')
var speedY = particles[i].getAttribute('speedY')
// 获取粒子的颜色
var color = particles[i].getAttribute('bgcolor')
// 修改粒子的left 和 top 实现移动效果，（先获取粒子当前的偏移量，然后加上移动速度）
particles[i].style.left = parseFloat(particles[i].style.left) + parseFloat(speedX) + 'px'
particles[i].style.top = parseFloat(particles[i].style.top) + parseFloat(speedY) + 'px'
particles[i].style.backgroundColor = color
}
}
setInterval(run, 10)5 让粒子在垂直方向随机向上或向下移动
window.onmousemove = function (e) {
var particle = document.createElement('div')
particle.className = 'particle'
particle.style.left = e.clientX + 'px'
particle.style.top = e.clientY + 'px'
var tempColor = getRandColor()
particle.setAttribute('bgcolor', tempColor)
var speedX = Math.random() * 1.5
var speedY = Math.random() * 0.75 * 1.5
// 生成随机数
var randDirectionValue = Math.random()
// 随机改变粒子在垂直方向的移动方向，向上 或者 向下
speedY = randDirectionValue > 0.5 ? speedY : -speedY
particle.setAttribute('speedX', speedX)
particle.setAttribute('speedY', speedY)
particle.setAttribute('period', 0)
document.body.appendChild(particle)
}6 为粒子设置生命周期，销毁过期粒子
const MAX_PERIOD = 100
window.onmousemove = function (e) {
var particle = document.createElement('div')
particle.className = 'particle'
particle.style.left = e.clientX + 'px'
particle.style.top = e.clientY + 'px'
var tempColor = getRandColor()
particle.setAttribute('bgcolor', tempColor)
var speedX = Math.random() * 1.5
var speedY = Math.random() * 0.75 * 1.5
// 生成随机数
var randDirectionValue = Math.random()
// 随机改变粒子在垂直方向的移动方向，向上 或者 向下
speedY = randDirectionValue > 0.5 ? speedY : -speedY
particle.setAttribute('speedX', speedX)
particle.setAttribute('speedY', speedY)
particle.setAttribute('period', 0)
document.body.appendChild(particle)
}
function run() {
var particles = document.getElementsByClassName('particle')
for (var i = 0; i < particles.length; i++) {
var speedX = particles[i].getAttribute('speedX')
var speedY = particles[i].getAttribute('speedY')
var color = particles[i].getAttribute('bgcolor')
var period = parseInt(particles[i].getAttribute('period'))
period += 1;
particles[i].style.left = parseFloat(particles[i].style.left) + parseFloat(speedX) + 'px'
particles[i].style.top = parseFloat(particles[i].style.top) + parseFloat(speedY) + 'px'
particles[i].style.backgroundColor = color
particles[i].setAttribute('period', period)
if (period >= MAX_PERIOD) {
document.body.removeChild(particles[i])
}
}
}
setInterval(run, 10)7 让粒子的颜色，跟随生命周期变化（淡出效果）
function getRandColor() {
// 改变随机颜色的返回值 ： 0-255,0-255,0-255
return Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256);
}
function run() {
var particles = document.getElementsByClassName('particle')
for (var i = 0; i < particles.length; i++) {
var speedX = particles[i].getAttribute('speedX')
var speedY = particles[i].getAttribute('speedY')
var color = particles[i].getAttribute('bgcolor')
var period = parseInt(particles[i].getAttribute('period'))
period += 1;
particles[i].style.left = parseFloat(particles[i].style.left) + parseFloat(speedX) + 'px'
particles[i].style.top = parseFloat(particles[i].style.top) + parseFloat(speedY) + 'px'
// 让粒子的颜色跟随，生命值而变化：使用 rgba 改变颜色的透明度
particles[i].style.backgroundColor = 'rgba(' + color + ',' + (1 - period / 100) + ')';
particles[i].setAttribute('period', period)
if (period >= MAX_PERIOD) {
document.body.removeChild(particles[i])
}
}
}8 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标的粒子尾巴</title>
</head>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: black;
position: relative;
overflow: hidden;
}
.particle {
width: 4px;
height: 4px;
left: 0;
top: 0;
border-radius: 50%;
position: absolute;
background: red;
}
</style>
<body>
</body>
<script>
// 定义粒子最大生命周期
const MAX_PERIOD = 100
// 获取随机颜色函数，返回值 ： 0-255,0-255,0-255
function getRandColor() {
return Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256);
}
// 鼠标移动事件处理
window.onmousemove = function (e) {
// 生成粒子
var particle = document.createElement('div')
//设置类名，使用 css，设置默认样式
particle.className = 'particle'
// 将粒子的 left top 偏移，设置为鼠标移动的位置
particle.style.left = e.clientX + 'px'
particle.style.top = e.clientY + 'px'
// 获取随机颜色值 xx,xx,xx
var tempColor = getRandColor()
// 设置为 bgcolor 属性
particle.setAttribute('bgcolor', tempColor)
// 生成粒子水平和垂直方向的随机移动速度
var speedX = Math.random() * 1.5
var speedY = Math.random() * 0.75 * 1.5
// 生成随机数
var randDirectionValue = Math.random()
// 随机改变粒子在垂直方向的移动方向，向上 或者 向下
speedY = randDirectionValue > 0.5 ? speedY : -speedY
// 为该粒子设置X，Y轴移动速度，和生命周期
particle.setAttribute('speedX', speedX)
particle.setAttribute('speedY', speedY)
particle.setAttribute('period', 0)
// 添加到网页当中
document.body.appendChild(particle)
}
// 运动函数
function run() {
// 获取所有的粒子
var particles = document.getElementsByClassName('particle')
// 开始遍历
for (var i = 0; i < particles.length; i++) {
// 获取粒子的水平、垂直方向的运动速度
var speedX = particles[i].getAttribute('speedX')
var speedY = particles[i].getAttribute('speedY')
// 获取粒子的颜色值
var color = particles[i].getAttribute('bgcolor')
// 获取粒子的当前的生命值
var period = parseInt(particles[i].getAttribute('period'))
// 增加生命值
period += 1;
// 将当前生命值重新设置给该粒子
particles[i].setAttribute('period', period)
// 修改粒子的left 和 top 实现移动效果，（先获取粒子当前的偏移量，然后加上移动速度）
particles[i].style.left = parseFloat(particles[i].style.left) + parseFloat(speedX) + 'px'
particles[i].style.top = parseFloat(particles[i].style.top) + parseFloat(speedY) + 'px'
// 让粒子的颜色跟随，生命值而变化：使用 rgba 改变颜色的透明度
particles[i].style.backgroundColor = 'rgba(' + color + ',' + (1 - period / 100) + ')';
// 如果该粒子生命值超过的定义的最大生命周期，则销毁该粒子
if (period >= MAX_PERIOD) {
document.body.removeChild(particles[i])
}
}
}
// 使用定时器运行运动函数
setInterval(run, 10)
</script>
</html>``
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
