HTML5 不倒翁体型的机器人

支持鼠标和触摸动作。星际旅行电影中BB-8机器人。 Source: http://apexdesignstudios.com

robot

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var $w = $(window).width();
var $dW = $('.bb8').css('width');
$dW = $dW.replace('px', '');
$dW = parseInt($dW);
var $dPos = 0;
var $dSpeed = 1;
var $dMinSpeed = 1;
var $dMaxSpeed = 4;
var $dAccel = 1.04;
var $dRot = 0;
var $mPos = $w - $w / 5;
var $slowOffset = 120;
var $movingRight = false;

setInterval(moveDroid, 10);

$(document).on("mousemove", function(event) {
    $('h2').addClass('hide');
    $mPos = event.pageX;
    return $mPos;
});

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway);
*,
*:before,
*:after {
    box-sizing: border-box;
}
body {
    background: #869f9d;
    overflow: hidden;
}
h2 {
    color: #ccc;
    font-family: "raleway", sans-serif;
    opacity: 1;
    text-align: center;
    transition: opacity 0.8s;
}
h2.hide {
    opacity: 0;
}
.sand {
    background: #b69c77;
    height: 30%;
    position: absolute;
    width: 100%;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
}
.bb8 {
    position: absolute;
    margin-left: -70px;
    width: 140px;
    bottom: 20%;
    left: 0;
}
.antennas {
    position: absolute;
    transition: left 0.6s;
    left: 22%;
}
.antennas.right {
    left: 0%;
}
.antenna {
    background: #e0d2be;
    position: absolute;
    width: 2px;
}
.antenna.short {
    height: 20px;
    top: -60px;
    left: 50px;
}
.antenna.long {
    border-top: 6px solid #020204;
    border-bottom: 6px solid #020204;
    height: 36px;
    top: -78px;
    left: 56px;
}
.head {
    background: #e0d2be;
    border-radius: 90px 90px 14px 14px;
    -moz-border-radius: 90px 90px 14px 14px;
    -webkit-border-radius: 90px 90px 14px 14px;
    height: 56px;
    margin-left: -45px;
    overflow: hidden;
    position: absolute;
    width: 90px;
    z-index: 1;
    top: -46px;
    left: 50%;
}
.head .stripe {
    position: absolute;
    width: 100%;
}
.head .stripe.one {
    background: #999;
    height: 6px;
    opacity: 0.8;
    z-index: 1;
    top: 6px;
}
.head .stripe.two {
    background: #cd7640;
    height: 4px;
    top: 17px;
}
.head .stripe.three {
    background: #999;
    height: 4px;
    opacity: 0.5;
    bottom: 3px;
}
.head .eyes {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    transition: left 0.6s;
    left: 0%;
}
.head .eyes.right {
    left: 36%;
}
.head .eye {
    border-radius: 50%;
    display: block;
    position: absolute;
}
.head .eye.one {
    background: #020204;
    border: 4px solid #e0d2be;
    height: 30px;
    width: 30px;
    top: 12px;
    left: 12%;
}
.head .eye.one:after {
    background: white;
    border-radius: 50%;
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    width: 3px;
    top: 4px;
    right: 4px;
}
.head .eye.two {
    background: #e0d2be;
    border: 1px solid #020204;
    height: 16px;
    width: 16px;
    top: 30px;
    left: 40%;
}
.head .eye.two:after {
    background: #020204;
    border-radius: 50%;
    content: "";
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
    top: 2px;
    left: 2px;
}
.ball {
    background: #d1c3ad;
    border-radius: 50%;
    height: 140px;
    overflow: hidden;
    position: relative;
    width: 140px;
}
.lines {
    border: 2px solid #b19669;
    border-radius: 50%;
    height: 400px;
    opacity: 0.6;
    position: absolute;
    width: 400px;
}
.lines.two {
    top: -10px;
    left: -250px;
}
.ring {
    background: #cd7640;
    border-radius: 50%;
    height: 70px;
    margin-left: -35px;
    position: absolute;
    width: 70px;
}
.ring:after {
    background: #d1c3ad;
    border-radius: 50%;
    content: "";
    display: block;
    height: 70%;
    margin-top: -35%;
    margin-left: -35%;
    position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
}
.ring.one {
    margin-left: -40px;
    height: 80px;
    width: 90px;
    top: 6%;
    left: 50%;
}
.ring.two {
    height: 38px;
    width: 76px;
    -ms-transform: rotate(36deg);
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg);
    top: 70%;
    left: 18%;
}
.ring.two:after {
    top: 100%;
}
.ring.three {
    height: 30px;
    -ms-transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
    top: 66%;
    left: 90%;
}
.ring.three:after {
    top: 110%;
}
.shadow {
    background: #3a271c;
    border-radius: 50%;
    height: 23.33333px;
    opacity: 0.7;
    position: absolute;
    width: 140px;
    z-index: -1;
    left: 5px;
    bottom: -8px;
}
.shameless {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
a {
    color: #333;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
}
a:visited {
    color: #333;
}
a:hover,
a:focus {
    color: white;
}

HTML

支持鼠标和触摸动作。星际旅行电影中BB-8机器人。 Source: http://apexdesignstudios.com

robot

编辑器支持Emmet

快捷键

支持鼠标和触摸动作。星际旅行电影中BB-8机器人。 Source: http://apexdesignstudios.com

robot

HTML5 WebGL佳作分享 - 电灯泡、漂浮的机器人和喷气式航天器

HTML5 Three.js DAE模型加载和动画：机器人跳舞

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：