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就可以

代码已经给大家整理好啦

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180128G0C76000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券