使用HTML+CSS+JS 实现粒子动画
2024-05-08 19:55:50
：阿余
：2022-3-2-2
：如有错误，敬请指正。感谢！
使用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.5var speedY = Math.random() * 0.75 * 1.5particle.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.5var speedY = Math.random() * 0.75 * 1.5// 生成随机数var randDirectionValue = Math.random()// 随机改变粒子在垂直方向的移动方向，向上 或者 向下speedY = randDirectionValue > 0.5 ? speedY : -speedYparticle.setAttribute('speedX', speedX)particle.setAttribute('speedY', speedY)particle.setAttribute('period', 0)document.body.appendChild(particle)}
6 为粒子设置生命周期，销毁过期粒子
const MAX_PERIOD = 100window.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.5var speedY = Math.random() * 0.75 * 1.5// 生成随机数var randDirectionValue = Math.random()// 随机改变粒子在垂直方向的移动方向，向上 或者 向下speedY = randDirectionValue > 0.5 ? speedY : -speedYparticle.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 = colorparticles[i].setAttribute('period', period)if (period >= MAX_PERIOD) {document.body.removeChild(particles[i])}}}setInterval(run, 10)
7 让粒子的颜色，跟随生命周期变化（淡出效果）
function getRandColor() {// 改变随机颜色的返回值 ： 0-255,0-255,0-255return 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-255function 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,xxvar tempColor = getRandColor()// 设置为 bgcolor 属性particle.setAttribute('bgcolor', tempColor)// 生成粒子水平和垂直方向的随机移动速度var speedX = Math.random() * 1.5var 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>
``
使用HTML+CSS+JS 实现粒子动画相关推荐
- HTML+CSS+JS实现透明度动画
1.box.html代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- HTML+CSS+JS实现 ❤️ 粒子倒计时特效❤️
- 有趣的HTML实例（十四） 窗边风景动画（css+js）
不要憎恨你的敌人,那会影响你的判断力. --<教父> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编码实现 index.html style.css ...
- 有趣的HTML实例（七） 注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编 ...
- 有趣的HTML实例（十五） 注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显示 六.编码实现 i ...
- 有趣的HTML实例（八） 一个很有趣的动态背景（css+js）
小时候,谁都觉得自己的未来闪闪发光,不是吗?但是一旦长大,没有一件事会遂自己心愿. --<被嫌弃的松子的一生> 目录 一.前言 二.往期作品回顾 三.作品介绍 四.本期代码介绍 五.效果显 ...
- 粒子背景php,Particles.js实现粒子动态背景动画
这次给大家带来Particles.js实现粒子动态背景动画,Particles.js实现粒子动态背景动画的注意事项有哪些,下面就是实战案例,一起来看一下. 操作过程: 网上有基本流程,可以参考一下,不 ...
- canvas文字粒子效果 html+css+js 3点饮茶，7点放工，美滋滋~
先言: 今天3点多在饮茶的时候,发现有好几天没水文章了,但是太难的玩意又不会啊,咋办,突然想起电脑里还有存着一个文字粒子特效,好家伙,这不就来了,先看效果如下: 因为gif图最大5m,但是这东西演示 ...
- 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
最新文章
- Compressive sensing
- 二分查找法（递归与循环实现）
- openai-gpt_为什么到处都看到GPT-3？
- linux网络编程-----项目管理工具-----Makefile
- django项目的创建与启动
- 使用fiddler脚本修改x-frame-options
- nodejs计算时间间隔_NodeJs笔记：setTimeout 或 setInterval 的间隔时间执行
- 第一章：Shiro简介
- vue iview组件表格 render函数的使用
- mac电脑用计算机名共享打印机,从Mac连接Windows共享打印机（2)
- vi编辑文件时如何批量替换字符串
- 零基础学FPGA（二）：FPGA生产厂家及产品（呕心沥血，小白如何选择板卡）
- 优盘完整性测试软件,MyDiskTest(U盘扩容检测工具)
- atomic 原子量的使用心得
- 验证iOS应用的无障碍特性
- 【推荐系统】：协同过滤和基于内容过滤概述
- 我喜欢生命本来的样子--周国平
- 天气预报API接口大全
- 求最大公约数和最小公倍数的方法：
- EDI助力物流行业整合供应链