粒子动画加载进度条效果
代码语言:html
所属分类:进度条
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Light Loader</title> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } </style> <style> body { background: #111; } canvas { background: #111; border: 1px solid #171717; display: block; margin:50px auto; } </style> <script src="http://repo.bfw.wiki/bfwrepo/js/prefixfree.min.js"></script> </head> <body> <script> /*========================================================*/ /* Light Loader /*========================================================*/ var lightLoader = function(c, cw, ch){ var _this = this; this.c = c; this.ctx = c.getContext('2d'); this.cw = cw; this.ch = ch; this.loaded = 0; this.loaderSpeed = .6; this.loaderHeight = 10; this.loaderWidth = 310; this.loader = { x: (this.cw/2) - (this.loaderWidth/2), y: (this.ch/2) - (this.loaderHeight/2) }; this.particles = []; this.particleLift = 180; this.hueStart = 0 this.hueEnd = 120; this.hue = 0; this.gravity = .15; this.particleRate = 4; /*========================================================*/ /* Initialize /*========================================================*/ this.init = function(){ this.loop(); }; /*========================================================*/ /* Utility Functions /*========================================================*/ this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}; this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){.........完整代码请登录后点击上方下载按钮下载查看
网友评论0