以下是 CSS3超酷粒子效果进度条js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>CSS3����������������</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;
left: 50%;
margin: -51px 0 0 -201px;
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<script src="js/index.js"></script>
</body>
</html>JS代码(index.js):
/*========================================================*/
/* 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 = 0this.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){
return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
}
;
/*========================================================*/
/* Update Loader/*========================================================*/
this.updateLoader = function(){
if(this.loaded < 100){
this.loaded += this.loaderSpeed;
}
else{
this.loaded = 0;
}
}
;
/*========================================================*/
/* Render Loader/*========================================================*/
this.renderLoader = function(){
this.ctx.fillStyle = '#000';
this.ctx.fillRect(this.loader.x,this.loader.y,this.loaderWidth,this.loaderHeight);
this.hue = this.hueStart + (this.loaded/100)*(this.hueEnd - this.hueStart);
var newWidth = (this.loaded/100)*this.loaderWidth;
this.ctx.fillStyle = 'hsla('+this.hue+',100%,40%,1)';
this.ctx.fillRect(this.loader.x,this.loader.y,newWidth,this.loaderHeight);
this.ctx.fillStyle = '#222';
this.ctx.fillRect(this.loader.x,this.loader.y,newWidth,this.loaderHeight/2);
}
;
/*========================================================*/
/* Particles/*========================================================*/
this.Particle = function(){
this.x = _this.loader.x + ((_this.loaded/100)*_this.loaderWidth) - _this.rand(0,1);
this.y = _this.ch/2 + _this.rand(0,_this.loaderHeight)-_this.loaderHeight/2;
this.vx = (_this.rand(0,4)-2)/100;
this.vy = (_this.rand(0,_this.particleLift)-_this.particleLift*2)/100;
this.width = _this.rand(1,4)/2;
this.height = _this.rand(1,4)/2;
this.hue = _this.hue;
}
;
this.Particle.prototype.update = function(i){
this.vx += (_this.rand(0,6)-3)/100;
this.vy += _this.gravity;
this.x += this.vx;
this.y += this.vy;
if(this.y > _this.ch){
_this.particles.splice(i,1);
}
}
;
this.Particle.prototype.render = function(){
_this.ctx.fillStyle = 'hsla('+this.hue+',100%,'+_this.rand(50,70)+'%,'+_this.rand(20,100)/100+')';
_this.ctx.fillRect(this.x,this.y,this.width,this.height);
}
;
this.createParticles = function(){
var i = this.particleRate;
while(i--){
this.particles.push(new this.Particle());
}
;
}
;
this.updateParticles = function(){
var i = this.particles.length;
while(i--){
var p = this.particles[i];
p.update(i);
}
;
}
;
this.renderParticles = function(){
var i = this.particles.length;
while(i--){
var p = this.particles[i];
p.render();
}
;
}
;
/*========================================================*/
/* Clear Canvas/*========================================================*/
this.clearCanvas = function(){
this.ctx.globalCompositeOperation = 'source-over';
this.ctx.clearRect(0,0,this.cw,this.ch);
this.ctx.globalCompositeOperation = 'lighter';
}
;
/*========================================================*/
/* Animation Loop/*========================================================*/
this.loop = function(){
var loopIt = function(){
requestAnimationFrame(loopIt,_this.c);
_this.clearCanvas();
_this.createParticles();
_this.updateLoader();
_this.updateParticles();
_this.renderLoader();
_this.renderParticles();
}
;
loopIt();
}
;
}
;
/*========================================================*/
/* Check Canvas Support/*========================================================*/
var isCanvasSupported = function(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
;
/*========================================================*/
/* Setup requestAnimationFrame/*========================================================*/
var setupRAF = function(){
var lastTime = 0;
var vendors = ['ms','moz','webkit','o'];
for(var x = 0;
x < vendors.length && !window.requestAnimationFrame;
++x){
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
;
if(!window.requestAnimationFrame){
window.requestAnimationFrame = function(callback,element){
var currTime = new Date().getTime();
var timeToCall = Math.max(0,16 - (currTime - lastTime));
var id = window.setTimeout(function(){
callback(currTime + timeToCall);
}
,timeToCall);
lastTime = currTime + timeToCall;
return id;
}
;
}
;
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id){
clearTimeout(id);
}
;
}
;
}
;
/*========================================================*/
/* Define Canvas and Initialize/*========================================================*/
if(isCanvasSupported){
var c = document.createElement('canvas');
c.width = 400;
c.height = 100;
var cw = c.width;
var ch = c.height;
document.body.appendChild(c);
var cl = new lightLoader(c,cw,ch);
setupRAF();
cl.init();
}
CSS代码(style.css):
body{background:#111;}
canvas{background:#111;border:1px solid #171717;display:block;left:50%;margin:-51px 0 0 -201px;position:absolute;top:50%;}
分享到QQ
分享到微博
微信扫一扫
