新7款HTML5/CSS3特效之粒子效果进度条

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

十度

HTML代码

复制格式化注释注释清空

放大

​x
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>新7款HTML5/CSS3特效之粒子效果进度条
        </title>
    </head>
    <body>
        <div style="text-align:center;clear:both">
        </div>
    </body>
</html>
​

CSS代码

复制格式化注释注释颜色清空

放大

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;
}
body {
  background: #111;
}
canvas {
  background: #111;
  border: 1px solid #171717;
  display: block;
  left: 50%;
  margin: -51px 0 0 -201px;
  position: absolute;
  top: 50%;
}

xxxxxxxxxx
 
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;

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 = 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){
    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();
}

xxxxxxxxxx
 
/*========================================================*/  
/* 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),

运行代码

简介

请输入代码名称！

名称

新7款HTML5/CSS3特效之粒子效果进度条

分类

CSS3

描述

今天我再来分享一款很有特色的HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果，就像一些小颗粒从进度条上散落下来，是一款别具特色的HTML5进度条插件。