使用HTML+CSS+JS 实现粒子动画

余大力BBQ

已于 2022-04-07 11:17:02 修改

阅读量2.4k

点赞数 5

分类专栏：前端小案例

于 2022-04-07 10:49:09 首次发布

本文链接：https://blog.csdn.net/qq_32232407/article/details/124005826

版权

HTML CSS JavaScript 粒子动画鼠标交互

关键词由CSDN通过智能技术生成

前端小案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

：阿余
：2022-3-2-2
：如有错误，敬请指正。感谢！

使用HTML+CSS+JS 实现粒子动画

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>