超炫的HTML5+CSS3进度条

Html

Css

body {
    background: #000;
}

canvas {
    background: #181818;
    box-shadow: 0 0 0 1px #282828;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

var canvas = document.createElement( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    width = 400
    height = 100,
    loaded = 0,
    loaderSpeed = 0.6,
    loaderWidth = 310,
    loaderHeight = 16,
    loaderX = width / 2 - loaderWidth / 2,
    loaderY = height / 2 - loaderHeight / 2,
    particles = [],
    particleLift = 180,
    particleRate = 4,
    hueStart = 0,
    hueEnd = 120,
    hue = 0,
    gravity = 0.12;

document.body.appendChild( canvas );
canvas.width = width;
canvas.height = height;
ctx.globalCompositeOperation = 'lighter';
                
function rand( rMi, rMa ) {
    return ~~((Math.random()*(rMa-rMi+1))+rMi);
}

function updateLoader() {
    if( loaded < 100 ) {
        loaded += loaderSpeed;
    } else {
        loaded = 0;
    }
}

function renderLoader() {
    ctx.fillStyle = '#000';
    ctx.fillRect( loaderX, loaderY, loaderWidth, loaderHeight );

hue = hueStart + ( loaded / 100 ) * ( hueEnd - hueStart );

var newWidth = ( loaded / 100 ) * loaderWidth;
    ctx.fillStyle = 'hsla(' + hue + ', 100%, 40%, 1)';
    ctx.fillRect( loaderX, loaderY, newWidth, loaderHeight );

ctx.fillStyle = '#444';
    ctx.fillRect( loaderX, loaderY, newWidth, loaderHeight / 2 );
}

function Particle() {                   
    this.x = loaderX + ( ( loaded / 100 ) * loaderWidth ) - rand( 0, 1 );
    this.y = height / 2 + rand( 0, loaderHeight ) - loaderHeight / 2;
    this.vx = ( rand( 0, 4 ) - 2 ) / 100;
    this.vy = ( rand( 0, particleLift ) - particleLift * 2 ) / 100;
    this.width = rand( 1, 4 ) / 2;
    this.height = rand( 1, 4 ) / 2;
    this.hue = hue;
}

Particle.prototype.update = function( i ) {
    this.vx += ( rand( 0, 6 ) - 3 ) / 100; 
    this.vy += gravity;
    this.x += this.vx;
    this.y += this.vy;

if( this.y > height ) {
        particles.splice( i, 1 );
    }                   
};

Particle.prototype.render = function() {
    ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + rand( 50, 70 ) + '%, ' + rand( 20, 100 ) / 100 + ')';
    ctx.fillRect( this.x, this.y, this.width, this.height );
};

function createParticles() {
    var i = particleRate;
    while( i-- ) {
        this.particles.push( new Particle() );
    }
}

function updateParticles() {                    
    var i = particles.length;                       
    while( i-- ) {
        var p = particles[ i ];
        p.update( i );                                          
    };                  
}

function renderParticles() {
    var i = particles.length;                       
    while( i-- ) {
        var p = particles[ i ];
        p.render();                                         
    }           
}

function clearCanvas() {
    ctx.clearRect( 0, 0, width, height );                   
}

function loop() {
    requestAnimationFrame( loop );
    clearCanvas();
    createParticles();
    updateLoader();
    updateParticles();
    renderLoader();
    renderParticles();
}

loop();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

超炫的HTML5+CSS3进度条



代码描述：超炫的进度条效果图

超级漂亮的进度条显示技术，令人百看不厌

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

qq12345643534

相关代码

超炫的HTML5+CSS3进度条

最新