Canvas+CSS3 表面有波纹动画和透明标签的立方体

CSS Cube With Canvas

canvas, cube, texture

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4219
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// size of cube
var size = 200;

// canvases
var canv = [],
    cont = [];
for (var a = 0; a < 12; a++) {
    canv[a] = document.getElementById("canv" + (a + 1));
    canv[a].width = size;
    canv[a].height = size;
    cont[a] = canv[a].getContext('2d');
    cont[a].lineWidth = 2;
}

// gradient backgrounds
var gradient = {
    red: cont[0].createRadialGradient(size / 2, size / 2, size / 2, size, size, 0),
    green: cont[2].createRadialGradient(size / 2, size / 2, size / 2, size, size, 0),
    blue: cont[4].createRadialGradient(size / 2, size / 2, size / 2, size, size, 0)
}

function grads(opacity) {
    gradient.red.addColorStop(0, "rgba(153,14,14," + opacity + ")");
    gradient.red.addColorStop(0.3, "rgba(186,51,20," + opacity + ")");
    gradient.red.addColorStop(1, "rgba(208,117,28," + opacity + ")");

gradient.green.addColorStop(0, "rgba(40,153,14," + opacity + ")");
    gradient.green.addColorStop(0.3, "rgba(101,186,20," + opacity + ")");
    gradient.green.addColorStop(1, "rgba(167,208,28," + opacity + ")");

gradient.blue.addColorStop(0, "rgba(14,14,153," + opacity + ")");
    gradient.blue.addColorStop(0.3, "rgba(20,51,186," + opacity + ")");
    gradient.blue.addColorStop(1, "rgba(28,117,208," + opacity + ")");
}

function drawGrads() {
    cont[0].fillStyle = gradient.red;
    cont[0].fillRect(0, 0, size, size);
    cont[1].fillStyle = gradient.blue;
    cont[1].fillRect(0, 0, size, size);
    cont[4].fillStyle = gradient.green;
    cont[4].fillRect(0, 0, size, size);
}

//grads(1);
//drawGrads();
grads(0.9);

// shape object creator
function shape() {
    this.type = Math.floor(Math.random() * 2) + 1;
    this.init = function() {
        this.pos = {
            x: Math.floor(Math.random() * size),
            y: Math.floor(Math.random() * size)
        };
        this.speed = Math.floor(Math.random() * 3) + 1;
        this.size = 0;
        this.animCount = 0;
    }
    this.init();
    this.draw = shapeDraw;
    this.count = shapeCount;
}

// count animation frames
function shapeCount() {
    this.animCount += this.speed;
    if (100 < this.animCount) {
        this.init();
    }
}

// draw shape
function shapeDraw(ctx) {
    var cc = (100 - this.animCount) * 0.004;
    ctx.strokeStyle = "rgba(255,255,255," + cc + ")";
    ctx.globalCompositeOperation = "overlay";
    if (this.type == 1) { // square
        ctx.strokeRect(this.pos.x - this.animCount, this.pos.y - this.animCount, this.animCount * 2, this.animCount * 2);
    }
    if (this.type == 2) { // circle
        ctx.beginPath();
        ctx.arc(this.pos.x, this.pos.y, this.animCount * 2, 0, 2 * Math.PI);
        ctx.stroke();
    }
    ctx.globalCompositeOperation = "normal";
}

// create shapes
var shapes = [];
for (var c = 0; c < 5; c++) {
    shapes.push(new shape());
}

// run every frame
setInterval(function() {
    cont[0].clearRect(0, 0, size, size);
    cont[1].clearRect(0, 0, size, size);
    cont[2].clearRect(0, 0, size, size);
    cont[3].clearRect(0, 0, size, size);
    cont[4].clearRect(0, 0, size, size);
    cont[5].clearRect(0, 0, size, size);
    drawGrads();

for (var d = 0; d < shapes.length; d++) {
        shapes[d].count();
        shapes[d].draw(cont[0]);
        shapes[d].draw(cont[1]);
        shapes[d].draw(cont[4]);
    }
    cont[2].drawImage(canv[0], 0, 0);
    cont[3].drawImage(canv[1], 0, 0);
    cont[5].drawImage(canv[4], 0, 0);

cont[6].drawImage(canv[0], 0, 0);
    cont[7].drawImage(canv[1], 0, 0);
    cont[10].drawImage(canv[4], 0, 0);
    cont[8].drawImage(canv[0], 0, 0);
    cont[9].drawImage(canv[1], 0, 0);
    cont[11].drawImage(canv[4], 0, 0);

cont[0].clearRect(50, 50, 100, 100);
    cont[1].clearRect(50, 50, 100, 100);
    cont[2].clearRect(50, 50, 100, 100);
    cont[3].clearRect(50, 50, 100, 100);
    cont[4].clearRect(50, 50, 100, 100);
    cont[5].clearRect(50, 50, 100, 100);

for (var q = 6; q < 12; q++) {
        cont[q].clearRect(0, 0, 50, 50);
        cont[q].clearRect(150, 150, 50, 50);
        cont[q].clearRect(0, 150, 50, 50);
        cont[q].clearRect(150, 0, 50, 50);
        cont[q].clearRect(50, 50, 100, 100);
    }

}, 1000 / 30);

编译

CSS

@keyframes spin {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
html {
    width: 100%;
    height: 100%;
    background: #202020;
}
.container {
    perspective: 1000px;
    perspective-origin: 50% 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}
.cube {
    animation: spin 10s infinite linear;
    position: relative;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    transition: transform 2s linear;
    transform-style: preserve-3d;
}
.cube > div {
    position: absolute;
    width: 200px;
    height: 200px;
}
.cube > div span {
    position: absolute;
    display: block;
    padding: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    top: 0;
    left: 0;
    font-size: 18px;
    font-family: impact;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 5px #000;
}
.cube > div:nth-child(-n+6) span {
    font-size: 30px;
    color: #fff;
}
div:nth-child(1) {
    transform: translateZ(100px);
}
div:nth-child(2) {
    transform: rotateY(90deg) translateZ(100px);
}
div:nth-child(3) {
    transform: rotateY(180deg) translateZ(100px);
}
div:nth-child(4) {
    transform: rotateY(-90deg) translateZ(100px);
}
div:nth-child(5) {
    transform: rotateX(-90deg) translateZ(100px) rotate(180deg);
}
div:nth-child(6) {
    transform: rotateX(90deg) translateZ(100px);
}
div:nth-child(7) {
    transform: translateZ(50px);
}
div:nth-child(8) {
    transform: rotateY(90deg) translateZ(50px);
}
div:nth-child(9) {
    transform: rotateY(180deg) translateZ(50px);
}
div:nth-child(10) {
    transform: rotateY(-90deg) translateZ(50px);
}
div:nth-child(11) {
    transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}
div:nth-child(12) {
    transform: rotateX(90deg) translateZ(50px);
}

HTML

<div class="container">
    <div class="cube">
        <div>
            <canvas id="canv1"></canvas><span>help</span>
        </div>
        <div>
            <canvas id="canv2"></canvas><span>stuck</span>
        </div>
        <div>
            <canvas id="canv3"></canvas><span>inside</span>
        </div>
        <div>
            <canvas id="canv4"></canvas><span>this</span>
        </div>
        <div>
            <canvas id="canv5"></canvas><span>silly</span>
        </div>
        <div>
            <canvas id="canv6"></canvas><span>cube</span>
        </div>
        <div>
            <canvas id="canv7"></canvas><span>help</span>
        </div>
        <div>
            <canvas id="canv8"></canvas><span>stuck</span>
        </div>
        <div>
            <canvas id="canv9"></canvas><span>inside</span>
        </div>
        <div>
            <canvas id="canv10"></canvas><span>this</span>
        </div>
        <div>
            <canvas id="canv11"></canvas><span>silly</span>
        </div>
        <div>
            <canvas id="canv12"></canvas><span>cube</span>
        </div>
    </div>
</div>

CSS Cube With Canvas

canvas, cube, texture

编辑器支持Emmet

快捷键

CSS Cube With Canvas

canvas, cube, texture

Three.js 立方体表面Canvas纹理绘制工具

CSS3 Minecraft 带贴图的3D立方体加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：