H5 两款炫的时间特效

正文共：1459字22图预计阅读时间：4分钟

最近在做自己的私站，想做个时间特效当搜索页面的背景，于是找了一些，在此分享两个。

－－－－－－－＋－－－－－-－

倒计时爆炸特效

－－－－－－－＋－－－－－-－

3D 倒计时爆炸特效

https://github.com/dataarts/dat.gui

使用方法：

三个常用属性：addFolder()、add()、addColor()

想详细学习dat.gui的自行Google一下

具体代码（代码太多，原谅我只粘贴了一些关键性的）

首先，正常的创建一个index.html文件、css文件夹和js文件夹

将dat js放入js文件夹内。然后创建一个index.js，index.js我打算写js代码，不放到html页面代码，看着爽一些。在css文件内加入一个style.css。

接着index.html引入相关js和css

页面代码写完了。。。休息一下

打开js文件夹下的index.js,开始撸function

window.requestAnimationFrame()是浏览器提供的js全局方法，针对动画效果。相当于渲染动画的框架，增大网页性能。

接着获取canvas对象并且设置宽高位置、颜色、字体等。

然后通过new Data获取当前时间设置为开始时间,设置时间间隔为0.2s。

设置一下自动变化大小的事件。

然后设置爆炸的颗粒和颗粒变化事件

最后设置轮回事件

代码搞定，css设置一下canvas的位置

运行index.html，瞅瞅效果图（如果想时间显示大小速度和爆炸颗粒，更改index.js就行）

代码已上传百度云，见文底

－－－－－－－＋－－－－－-－

跳舞的时间

－－－－－－－＋－－－－－-－

canvas做的跳舞的时间

准备工作:

创建css文件夹、js文件夹、index.js

下载jquery.js放到js中,并创建boom.js放到js文件夹

index.html引入两个js

boom.js中写了Google找的用canvas创建爆炸圆球的js

然后加入获取时间，并将获取的时间加入颜色、距离，并给时间数字添加了小球等属性

当时间秒变化的时候，加入彩色小球，达到爆炸的小效果

接着获取web窗口的大小，将获取的属性控制小球的边界，如果爆炸的彩色小球超过web边界，则将这个小球删除掉。

最后设置循环调用的事件，让不停的刷新页面。

搞定后查看效果。。。

想调节颜色和速度等设置相关属性，比如：

小球的颜色可以设置colors属性

设置小球活跃度设置属性u就可以

代码已经给大家整理好啦