HTML5 带面部表情的拟人化立方体

点击立方体可以切换其表情符号

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var c = document.querySelector('.container');
var cubs = [];
for (var i = 0; i < c.children.length; i++) {
    if (c.children[i].className == 'cube') {
        var cube = c.children[i];
        var l = document.createElement('div');
        var r = document.createElement('div');
        var t = document.createElement('div');
        var b = document.createElement('div');
        var f = document.createElement('div');
        var bk = document.createElement('div');
        var le = document.createElement('span');
        var re = document.createElement('span');
        var mouth = document.createElement('span');

l.className = 'left';
        r.className = 'right';
        t.className = 'top';
        b.className = 'bottom';
        f.className = 'front';
        bk.className = 'back';
        le.className = 'leftEye';
        re.className = 'rightEye';
        mouth.className = 'mouth';

f.appendChild(le);
        f.appendChild(re);
        f.appendChild(mouth);
        cube.appendChild(l);
        cube.appendChild(r);
        cube.appendChild(t);
        cube.appendChild(b);
        cube.appendChild(f);
        cube.appendChild(bk);

for (n = 0; n < cube.children.length; n++) {
            cube.children[n].style.position = 'absolute';
            cube.children[n].style.height = '50px';
            cube.children[n].style.width = '50px';
            cube.children[n].style.backgroundColor = 'hsl(' + ((360 / c.children.length) * i) + ', 40%, ' + (30 + (n * 10)) + '%)';
        }
        f.style.webkitTransform = 'translateZ(25px)';
        bk.style.webkitTransform = 'translateZ(-25px)';
        l.style.webkitTransform = 'rotateY(90deg) translateZ(-25px)';
        r.style.webkitTransform = 'rotateY(90deg) translateZ(25px)';
        t.style.webkitTransform = 'rotateX(90deg) translateZ(25px)';
        b.style.webkitTransform = 'rotateX(90deg) translateZ(-25px)';

cubs.push(new cub(i));
    }
}

function cub(index) {
    this.index = index;
    this.x = c.offsetLeft - (c.offsetWidth / 2) + cube.offsetLeft + (cube.offsetWidth / 2);
    this.y = c.offsetTop - (c.offsetHeight / 2) + cube.offsetTop + (cube.offsetHeight / 2);
}

for (var i = 0; i < c.children.length; i++) {
    var ch = c.children[i];
    ch.addEventListener('click', function() {
        if (this.id !== 'killed') {
            this.setAttribute('id', 'killed');
        } else {
            this.setAttribute('id', '');
        }
    });
}

document.addEventListener('mousemove', function(e) {
    for (var i = 0; i < c.children.length; i++) {
        var elem = c.children[i];
        var posX = ((e.clientX - cubs[i].x) / window.innerWidth) * 110;
        var posY = (-1 * (e.clientY - cubs[i].y) / window.innerHeight) * 110;
        elem.style.webkitTransform = 'rotateY(' + posX + 'deg) rotateX(' + posY + 'deg)';
    }
});

编译

CSS

body,
html {
    margin: 0;
    padding: 0;
    background: #333;
}
.container,
.cube {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.container {
    -webkit-perspective: 800px;
    perspective: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 0;
}
.cube {
    cursor: pointer;
    display: inline-block;
    height: 50px;
    width: 50px;
    margin: 30px;
}
.leftEye,
.rightEye {
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    position: absolute;
    top: 5px;
    height: 20px;
    width: 8px;
    background: #000;
}
.leftEye {
    left: 10px;
}
.rightEye {
    right: 10px;
}
.mouth {
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    position: absolute;
    bottom: 10px;
    width: 70%;
    left: 15%;
    height: 5px;
    background-color: #000;
}
.cube:hover .leftEye {
    left: 15px;
}
.cube:hover .rightEye {
    right: 15px;
}
.cube:hover .mouth {
    height: 10px;
    width: 14%;
    left: 43%;
    border-radius: 100%;
}
#killed {
    -webkit-animation: killed 5s linear infinite;
    animation: killed 5s linear infinite;
    opacity: 0.5;
}
#killed .leftEye {
    -webkit-transform: translateX(3px) rotateZ(50deg);
    transform: translateX(3px) rotateZ(50deg);
    width: 4px;
    height: 15px;
}
#killed .rightEye {
    -webkit-transform: translateX(-3px) rotateZ(-50deg);
    transform: translateX(-3px) rotateZ(-50deg);
    width: 4px;
    height: 15px;
}
#killed .mouth {
    height: 20px;
    width: 50%;
    left: 25%;
    bottom: 5px;
    border-radius: 5px;
}
@-webkit-keyframes killed {
    from {
        -webkit-transform: rotateX(0) rotateY(0);
    }
    to {
        -webkit-transform: rotateX(360deg) rotateY(360deg);
    }
}
@keyframes killed {
    from {
        transform: rotateX(0) rotateY(0);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

HTML

点击立方体可以切换其表情符号

编辑器支持Emmet

快捷键

点击立方体可以切换其表情符号

HTML5 Three.js读取Kinect数据并在网页呈现（人体摇头晃脑动作的捕捉数据3D可视化）

HTML5 Canvas三角形网格组成的球体在水面颠簸动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：