酷炫canvas粒子插件
2024-06-29 12:18:14
今天在github上发现了一个有趣的canvas插件，分享一下。（效果很华丽！0_0）
源码地址：https://github.com/VincentGarreau/particles.js
**************************************************************************************************************
功能是打开页面会漂浮很多小“星星”（可以直接设置形状，参考github上的说明），然后当数量比较少时它们接触后（距离比较短）会连成线，超过则会消失那条连线，你可以点击屏幕自己制造出更多的小“星星”，然后当它们数量多的时候接触的机会就会更大，会自然连成很多线，它们不断漂浮，会造成视觉上的一种绚丽的感觉。而且当你鼠标靠近它们的时候会散开。
以上是我第一次执行代码后自己的直观感受，大家可以自己玩玩，然后修改。
效果图：（我自己修改了一点点）
其实源码不止这样，我只是为了呈现这个效果，然后“断章取义”，只应用了一些文件，新手可以参考我的做法先看看效果。
我们可以自由发挥，把这个利用到我们的项目中，例如可以作为“酷炫的背景”
代码组成
index.html
style.css
particles.js（插件实现代码）
app.js（配置文件，json格式，你要修改效果就只需改这个文件即可。）
后面2个js比较大，我这里就不贴源码了。大家可以去他github上下载即可。
index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>canvas</title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" href="style.css" /></head><body><!-- particles.js container --><div id="particles-js"></div><!-- scripts --><script src="particles.js"></script><script src="app.js"></script></body></html>
style.css
/* =============================================================================HTML5 CSS Reset Minified - Eric Meyer========================================================================== */html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}/* =============================================================================My CSS========================================================================== *//* ---- base ---- */html,body{ width:100%;height:100%;background:#ffffff;
}html{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}body{font:normal 75% Arial, Helvetica, sans-serif;
}canvas{display:block;vertical-align:bottom;
}/* ---- particles.js container ---- */#particles-js{width: 100%;height: 100%;background-color: #bd2322;/*---修改背景---*/background-image: url('');background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;
}酷炫canvas粒子插件相关推荐
- 酷炫背景粒子插件particles.js星空背景使用示例源码 - 附演示及下载地址
官方给的例子有点复杂,项目中一般就引一个 JS 文件然后调用好了,简单粗暴,网上很少有想要的效果,而且都没有源码,这里分享一个 文章目录 一.源码地址 二.实现效果 1. 电脑端 2. 手机端 三.源 ...
- android 漩涡动画,html5 canvas酷炫的粒子漩涡动画特效
特效描述:html5 canvas 粒子漩涡 动画特效.html5粒子漩涡动画,酷炫的粒子动画特效 代码结构 1. HTML代码 function project3D(x,y,z,vars){ var ...
- 炫酷的canvas粒子文字js特效
下载地址 一款HTML5 canvas特效,炫酷的canvas粒子文字特效,该素材呈现了由多彩的粒子形成文字的动画效果,可用作网页进入动画等,精简易用. dd:
- 用代码打造超酷炫的粒子特效龙卷风，免费提供完整代码。
是不是很炫酷?别着急嘛,下面就是代码. <html><head> <meta charset="utf-8"> <meta name=&q ...
- 基于Vue封装酷炫进度条插件
目录 效果如下: 源码: 效果如下: 源码: 新建script.js var script = {data() {return {clouds: 50,particles:300,particleAr ...
- php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...
- FushionChart一个酷炫的图表插件
FushionChart是一个关于图表的js插件.它能够把很多简单的图表用很酷很炫的方式显示在html中.它接受json,xml数据格式,我们只需要知道不同图表不同的数据格式就能够正确显示图表了.它操 ...
- intelliJ idea酷炫代码特效插件
鉴于CSDN肆无忌惮的广告,博客不再更新,更多动态请移步至个人网站:https://youyou-2608.com 1. 打开idea,File>Settings>Plugins 2. 输 ...
- Pycharm一定要使用的5款插件，实用且酷炫！
相信对于不少的Python程序员们都是用Pycharm作为开发时候的IDE来使用的. 今天我来分享几个好用且酷炫的Pycharm插件,在安装上之后,你的编程效率.工作效率都能够得到极大地提升. 1.R ...
最新文章
- quick cocos2d-x 使用CCTableView 例子
- SQL Server 2008 R2 安全性专题（一）：安全原则
- python代码画图案-python如何绘制iPhone手机图案？（代码示例）
- ASP.NET前台JS与后台CS函数如何互相调用
- Nios 定时器内核之timestamp_timer
- Docker框架的使用系列教程（二）
- nodejs shell交互_nodejs调用shell
- .Net Core功能开关实战
- 「offer来了」浅谈前端面试中开发环境常考知识点
- bash 抓捕异常_SHELL异常处理(转载)
- ArcGIS Desktop10.2与CityEngine2012兼容问题
- \t\t使用Google APP Engine 完成个人代理服务器架设
- 如何下载windows自带的锁屏壁纸
- shiny | 使用R创建一个网页应用（Web App）
- radiogroup多选_为何多组RadioGroup 里面的RadioButton 会出现多选状态？
- 计算机中可以由用户设置的文件属性,计算机考试模拟试题
- 互联网的行业都有哪些岗位?
- 林肯公园(LINKIN PARK)上海演唱会观众座位表(转帖)
- 计算机毕业设计Java超市货品进销存系统后台(源码+系统+mysql数据库+lw文档）
- 关于ASO优化的这些你懂了吗？