html鼠标跟随粒子特效(html粒子效果)
有谁知道这样的flash效果如何做出来哦？
这有两个效果。第一是鼠标跟随。
第二：看他的那个特效，应该用了粒子。
那么就要用到粒子软件。 如果不用粒子的话，直接用FLASH做就麻烦一点。粒子软件是为我们做特效省时间而已。
html鼠标点击出现小球
动
html绘制小球并跟随鼠标移动,Canvas跟随鼠标炫彩小球的实现
?
黄利好
转载
关注
0点赞·318人阅读
跟随鼠标炫彩小球
canvas没有让我失望，真的很有意思
实现效果
超级炫酷
实现原理
创建小球
给小球添加随机颜色，随机半径
鼠标移动通过实例化，新增小球
通过调用给原型新增的方法，来实现小球的动画效果
通过定时器不断地更新画布
实现过程
创建小球
通过创建函数收纳小球所有的样式，再通过实例化函数，将鼠标当前的位置传递给Ball函数，让通过实例化创建出来的小球，最后将创建出来的小球存入数组中，数组中以对象形式存放着每个小球的属性和属性值
function Ball(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.color = getRandom();//随机生成颜色
this.dx = parseInt(Math.random() * 10) - 5;//生成随机移动的位置
this.dy = parseInt(Math.random() * 10) - 5;//`-5`是让小球能向四周随机移动
ballArr.push(this);//添加小球
}
//监听鼠标移动事件
canvas.addEventListener('mousemove', function (e) {
new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20));
/*实例化Ball为Ball对象通过__proto__来调用原型的方法*/
})
生成随机颜色
对于color这个属性，可以通过6位16进制的值来表示一种颜色
因此，可以通过随机产生一个6位的16进制数来做为随机颜色
将0到f这16个数存入数组中，通过随机生成6个0到16的索引值，这样就能通过数组的索引号随机的获取6个到0到f中的数了
split的作用是：以括号内的参数为标志符来分割字符串，返回数组
//设置随机颜色
function getRandom() {
var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//16进制颜色
var allTypeArr = allType.split(',');//通过','分割为数组
var color = '#';
for (var i = 0; i 6; i++) {
//随机生成一个0-16的数
var random = parseInt(Math.random() * allTypeArr.length);
color += allTypeArr[random];
}
return color;//返回随机生成的颜色
}
渲染小球
给函数的原型链中添加render方法，让每一个通过Ball函数实例化出来的对象，带有这些方法
这个函数的作用是，通过Ball的参数生成一个圆形，在实例化的时候，会生成一个对象，这个对象里就存放的x,y,r这些值
Ball.prototype.render = function () {
ctx.beginPath();//路径开始
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//画圆，位置，半径
ctx.fillStyle = this.color;//颜色
ctx.fill();//填充
}
更新小球信息
因为生成的小球x,y,r是固定的，所以小球的位置也是固定的，不会改变
因此需要通过改变每个小球的位置和半径让小球动起来，当小球的半径小于0时，调用remove方法将小球从数组中删除
/* 更新小球位置和半径 小于0时清除 */
Ball.prototype.update = function () {
this.x += this.dx;//x改变
this.y += this.dy;//y改变
this.r -= 0.1;//半径减小
if (this.r 0) {
this.remove();//调用添加的remove方法
}
}
删除小球
这是上面调用的remove方法，当this也就是当前小球半径小于0时i，遍历整个数组，找到这个this，也就是”这个小球“，通过调用数组中的方法，删除掉数组的这个元素
splice(index,num) 方法可删除从 index 处开始删除num个元素
Ball.prototype.remove = function () {
for (var i = 0; i ballArr.length; i++) {
if (ballArr[i] == this) {
ballArr.splice(i, 1);//找到这个小于0 的元素，删除
怎么给html5背景加上js粒子特效
使用了particles.js
particles.js可以从github网站下载到最新的源码，网址是
使用方法非常简单
第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到
script?src="particles.min.js"/script
第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
div?id="particles-js"/div
style?type="text/css"
#particles-js?{
position:?absolute;
top:0;
width:100%;
}
/style
第三步，设置窗口样式
style?type="text/css"
#particles-js?{
z-index:?-1;
position:?absolute;
top:?0;
width:?100%;
background:?#aaa;
}/style
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在script标签里。无论如何，这段脚本要出现在div容器之后。
particlesJS("particles-js",?{??"particles":?{????"number":?{??????"value":?380,??????"density":?{????????"enable":?true,????????"value_area":?800
??????}
????},????"color":?{??????"value":?"#ffffff"
????},????"shape":?{??????"type":?"circle",??????"stroke":?{????????"width":?0,????????"color":?"#000000"
??????},??????"polygon":?{????????"nb_sides":?5
??????},??????"image":?{????????"src":?"img/github.svg",????????"width":?100,????????"height":?100
??????}
????},????"opacity":?{??????"value":?0.5,??????"random":?false,??????"anim":?{????????"enable":?false,????????"speed":?1,????????"opacity_min":?0.1,????????"sync":?false
??????}
????},????"size":?{??????"value":?3,??????"random":?true,??????"anim":?{????????"enable":?false,????????"speed":?40,????????"size_min":?0.1,????????"sync":?false
??????}
????},????"line_linked":?{??????"enable":?true,??????"distance":?150,??????"color":?"#ffffff",??????"opacity":?0.4,??????"width":?1
????},????"move":?{??????"enable":?true,??????"speed":?6,??????"direction":?"none",??????"random":?false,??????"straight":?false,??????"out_mode":?"out",??????"bounce":?false,??????"attract":?{????????"enable":?false,????????"rotateX":?600,????????"rotateY":?1200
??????}
????}
??},??"interactivity":?{????"detect_on":?"canvas",????"events":?{??????"onhover":?{????????"enable":?true,????????"mode":?"grab"
??????},??????"onclick":?{????????"enable":?true,????????"mode":?"push"
??????},??????"resize":?true
????},????"modes":?{??????"grab":?{????????"distance":?140,????????"line_linked":?{??????????"opacity":?1
????????}
??????},??????"bubble":?{????????"distance":?400,????????"size":?40,????????"duration":?2,????????"opacity":?8,????????"speed":?3
??????},??????"repulse":?{????????"distance":?200,????????"duration":?0.4
??????},??????"push":?{????????"particles_nb":?4
??????},??????"remove":?{????????"particles_nb":?2
??????}
????}
??},??"retina_detect":?true});
网页css设置鼠标移动有特效
首先我们创建一个html文件，写出html文件的一些基础代码
然后我们在网页中新建一个div，并新建一个
无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，
接下来我们使用下面的代码去除标签的格式，其中：list-style:none; 表示去除标签的格式width:160px; 表示设置标签的宽height:240px;表示设置标签的高background:#666666;表示设置标签的背景色float:left;表示设置标签浮动显示，并且为左浮动margin-right:20px;表示设置标签右外边距
刷新浏览器中html文件查看效果，
这里我们开始添加动画：
给
标签添加：
transition:transform 0.1s;
transform表示变换的属性，0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性
li:hover{cursor:pointer;transform:translate(0,-10px);}
cursor:pointer;表示鼠标滑过显示为小手形状
transform:translate(0,-10px);translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，
进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：