html、css、js粒子特效——前端

看看效果图

首先是html结构
使用canvas设置一个画布

<canvas width="500px" height="500px" id="content">您的浏览器版本过低，请升级浏览器！</canvas>

下面是js
背景粒子`

et items = document.getElementsByTagName('li')let bg = document.getElementById('bg')for (let i = 0; i < items.length; i++) {let r = parseInt(Math.random() * 30)let u = parseInt(Math.random() * 10 + 6)let e = Math.random()items[i].style.left = r * bg.offsetWidth / 30 + 'px'items[i].style.animationDelay = e * 20 + 's'items[i].style.animationDuration = u * 2 + 's'}

获取画布

var canvas = document.querySelector("#content");var context = canvas.getContext("2d");// 动画展示范围var w = 500,h = 500;// 封装函数工具// 画点function drawCircle(x, y, r, color) {// context.beginPath();context.fillStyle = color;context.arc(x, y, r, Math.PI / 180 * 0, Math.PI / 180 * 360);context.fill();}// 画粒子的图像和方法class ball {constructor(dx, dy) {// 从随机位置向dx，dy移动，速度由time决定 this.x = range(w);this.y = range(h)// 目标点坐标this.dx = dx;this.dy = dy;// 总距离this.initialX = this.dx - this.xthis.initialY = this.dy - this.y// 时间this.time = 100// 粒子半径和颜色this.r = 1.5;this.color = colorR();}

画出粒子的轨迹

 draw(count) {// 后面是速度方程 时间单位为1// this.x += this.initialX /100;// this.y += this.initialY /100;this.x += this.initialX * 2 / this.time * (1 - count / this.time);this.y += this.initialY * 2 / this.time * (1 - count / this.time);drawCircle(this.x, this.y, this.r, this.color);}}

设置随机数、随机颜色、筛选粒子位置、筛选有效像素点

/ 生成随机数function range(i) {return Math.random() * i;}function intR(i) {return Math.floor(Math.random() * i)}// 随机颜色function colorR() {let key = range(1)if (key > 0.3) {return '#fff'} else return '#838383'}// 筛选粒子位置function getImgData(img) {context.clearRect(0, 0, w, h);context.drawImage(img, 0, 0, 500, 500);var copy = context.getImageData(0, 0, 500, 500); // 获取像素点数据            img.ballArr = [];// 筛选有效像素点context.clearRect(0, 0, w, h);for (var y = 0; y < h; y += 8) {for (var x = 0; x < w; x += 8) {// 像素点的序号var index = x + y * w;// 帅选条件为透明度var a = copy.data[index * 4 + 3];if (a > 100) {// 符合条件条件的坐标绘制粒子let bal = new ball(x, y);img.ballArr.push(bal);// bal.draw();};}}}

动画部分

/ 设置动画function animateBall(img) {var count = 1;clearInterval(t1)t1 = setInterval(function () {// console.log(ballArr);context.clearRect(0, 0, w, h);for (var i = 0; i < img.ballArr.length; i++) {img.ballArr[i].draw(count);}if (count == 100) {clearInterval(t1);}count++;}, 30)}// 开始动画function start(a, b, t) {setTimeout(() => {relateTow(a, b)animateBall(a)}, 4000 * t)}//连接两个数组function relateTow(a, b) {for (let i = 0; i < a.ballArr.length; i++) {let v = intR(b.ballArr.length)a.ballArr[i].x = b.ballArr[v].dxa.ballArr[i].initialX = a.ballArr[i].dx - a.ballArr[i].xa.ballArr[i].y = b.ballArr[v].dya.ballArr[i].initialY = a.ballArr[i].dy - a.ballArr[i].y}}

绘图
绘图，这里要用img.onload,且所有的步骤都要写在里面，否则读取不到画布像素，值都为0

var img1 = new Image();var img2 = new Image();var img3 = new Image();var img4 = new Image();var img5 = new Image();var img6 = new Image();var img7 = new Image();img1.src = './images/e740e7973ba8559164ed75529ff6f946efd001fc.png@942w_942h_progressive.webp'img2.src = './images/916637ae86ff9365700b7f6cf13148e1a4282388.png@942w_942h_progressive.webp'img3.src = './images/22d926f0f1e11fb36a69d8393b3e6955448d0231.png@942w_942h_progressive.webp'img4.src = './images/3fe9d2cc6a26e765b04450eafedcccc50e7f3a95.png@942w_942h_progressive.webp'img5.src = './images/4a2271098cab8382a1d6bc39ceaa9cf6596fa42e.png@942w_942h_progressive.webp'img6.src = './images/a555d53276872ec8e04aae88cecda7ca50b2608d.png@942w_942h_progressive.webp'img7.src = './images/b5f7d2d2e1d84e998ce71be55e886d74fc7566b0.png@942w_942h_progressive.webp'

这里的图片全是我从网络中寻找的，大家可以自习替换成想要的

最后设置定时器，就算大功告成

var t1 //定时器// 获取所有的图形，粒子位置信息img1.onload = function () {getImgData(img1)}img2.onload = function () {getImgData(img2)}img3.onload = function () {getImgData(img3)}img4.onload = function () {getImgData(img4)}img5.onload = function () {getImgData(img5)}img6.onload = function () {getImgData(img6)}img7.onload = function () {getImgData(img7)}// 等待图片绘制后开始setTimeout(() => {const target = () => {start(img1, img7, 0)start(img2, img1, 1)start(img3, img2, 2)start(img4, img3, 3)start(img5, img4, 4)start(img6, img5, 5)start(img7, img6, 6)return target}setInterval(target(), 28000)}, 100)
}

至此，js部分结束

css样式表

* {margin: 0;padding: 0;
}body {position: relative;width: 100%;height: 100vh;overflow: hidden;
}#bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgb(44, 44, 44);display: flex;flex-direction: column;justify-content: center;align-items: center;}canvas {/* border: 1px solid #838383; */position: relative;top: -20px;display: block;}#lizi {position: absolute;width: 100%;height: 100vh;
}li {position: absolute;top: 105%;left: 0;width: 4px;height: 4px;background-color: rgb(253, 253, 253);border-radius: 50%;filter: blur(2px);list-style: none;animation: animate linear infinite;}@keyframes animate {0% {top: 100%;}100% {top: 0%;}
}#decrition {position: relative;width: 300px;height: 5px;border-radius: 50%;filter: blur(1px);background-color: rgb(49, 49, 49);animation: animate2 3.5s linear infinite;
}@keyframes animate2 {0% {background-color: rgb(49, 49, 49);}50% {background-color: rgb(119, 119, 119);}100% {background-color: rgb(49, 49, 49);}
}

大功告成

html、css、js粒子特效——前端相关推荐

Three.js粒子特效，shader渲染初探
这大概是个序关于Three.js,网上有不多不少的零碎教程,有些过于初级,有些云里雾里,而Three.js官网上的示例逼格之高又令人望而却步,这些对于没学过计算机图形学的童鞋来说,就像入门迈槛不知先 ...
【html+css+js】用前端做一个视频播放器页面
目录介绍 HTML5 CSS3 JavaScript 效果图展示介绍学习前端两个星期后学到了很多,知道了html是制作网页的"骨架",css是制作好看的皮囊,js是让人动起来 ...
particles.js粒子特效（常用登录页背景）
1.效果图 2.js下载 particles.js开源地址:GitHub - VincentGarreau/particles.js: A lightweight JavaScript library ...
html+css+js实现的前端模板
代码功能实现一个为用户提供能够快速制作主流表情包的网站.提供丰富的模板和在线自定义图片功能.可以对图片添加文字.水印和图片等功能.丰富的动画效果搭配颜值的前端模板,可以用来学习学习. 话不多说,上图 ...
HTML/CSS/JS 鼠标特效二（鼠标点击WEB页面出现彩色爱心冒泡特效）
1.实际效果 [青树柠檬~旧事老酒] 2.示例代码 /*--鼠标点击特效,不同颜色桃心图案*/ <script type="text/javascript">!func ...
js粒子特效——particles
链接:https://pan.baidu.com/s/1KqsZ5I8Qjz_J7ysQtw8tMw 提取码:qy38 1.下载并引入particles.js 2.<div class=&q ...
【浪漫气球——HTML CSS JS （特效+代码）】
目录效果代码效果可以根据个人意愿再修改呀! 代码 index.html <!DOCTYPE html> <html><head>
手把手教你系列 - Particle粒子特效（完整代码部分）
本着瞎折腾的学习态度,在闲暇之余就是要搞点奇奇怪怪的事情.文中如有哪不对的地方,还请大家指出. 本文项目github地址:https://github.com/SmallStoneSK/particl ...
HTML+CSS+JS+LayUI—西湖景区介绍网
博客概要简单分享基于前端技术制作完成的"西湖"景区介绍网~ 文章目录博客概要系统开发概要简单需求分析功能性需求非功能性需求页面设计 1.导航栏 2.首页 3.西湖故事 ...

html、css、js粒子特效——前端

html、css、js粒子特效——前端

html、css、js粒子特效——前端相关推荐

最新文章

热门文章