伪3D

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    shapes = [],
    s = {
        'count': 100,
        'size': 20,
        'speed': 10,
        'focal': 300,
        'perspective': 5000
    };

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame       ||
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame    ||
           window.oRequestAnimationFrame      ||
           window.msRequestAnimationFrame     ||
           function (callback) {
               window.setTimeout(callback, 1000/60);
           };
})();

function resize() {
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    ctx.translate(.5*c.width, .5*c.height);
    shapes = [];
    init();
}
resize();
window.addEventListener("resize", resize);

var gui = new dat.GUI();
gui.add(s, "count", 1, 300, 1).onChange(resize);
gui.add(s, "size", 1, 100, 1).onChange(resize);
gui.add(s, "speed", 1, 50, 1);
gui.add(s, "focal", 1, 1000, 1);
gui.add(s, "perspective", 1, 10000, 1);

function Shape(x, y, z, col, shape) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.col = col;
    this.shape = shape;
}

function setColor () {
    return 'rgba(' + Math.round(255*Math.random()) + ',' 
                   + Math.round(255*Math.random()) + ',' 
                   + Math.round(255*Math.random()) + ','
                   + Math.random()
           ')';
}

function init() {
    for(var i=0; i<s.count; i++) {
        var x = -c.width/2 + c.width*Math.random(),
            y = -c.height/2 + c.height*Math.random(),
            z = s.perspective*Math.random(),
            col = setColor(),
            shape = setShape(Math.random());
        shapes.push(new Shape(x, y, z, col, shape));
    }
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg