HTML5制作机器人,使用CSS3制作机器人总动员的Eva

影片《机器人总动员》是2008年一部由安德鲁·斯坦顿编导的科幻动画电影。这部动画片自上映以来风靡全球，片中的主角-小机器人Eva更是成为卡通明星。现在我们就要用CSS3技术来绘制这位开通明星。

Eva的html结构非常简单：我们使用一个相对定位的div来包含一些绝对定位的div元素，用它们来“组装”Eva。所有的绝对定位的div(除了Eva的身体)都使用单独的空div来制作。手臂和身体之间使用了嵌套div结构，手臂嵌套在body div中，这样，移动身体也会移动它的手臂。头部和眼镜部分也是类似的结构。

在div.eve-container中有一个不属于Eva身体的div-它的影子eve-shadow。当我们通过css的box-shadow来对它进行渲染后，你将会看到在Eva下方的一个漂亮的阴影。

下面是制作Eva的CSS代码，注意代码中没有使用浏览器厂商的前缀。

div#eve-container { position: relative; width: 200px; height: 600px; margin: 0 auto; }

div#eve-container div { position: absolute; }

div#eve-head {

height: 145px; width: 180px;

border-top-left-radius: 90px 85px;

border-top-right-radius: 90px 85px;

border-bottom-left-radius: 90px 60px;

border-bottom-right-radius: 90px 60px;

background-color: #fff; border: 1px solid #999;

}

div#eve-faceplate {

background-color: #000;

width: 150px;

height: 95px;

bottom: 8px;

margin: 0 15px;

border-top-left-radius: 75px 60px;

border-top-right-radius: 75px 60px;

border-bottom-left-radius: 75px 35px;

border-bottom-right-radius: 75px 35px; }

div.eye { width: 45px; height: 25px;

background-color: #00a; bottom: 25px;

border-top-left-radius: 22px 12px;

border-top-right-radius: 22px 12px;

border-bottom-left-radius: 22px 13px;

border-bottom-right-radius: 22px 13px;

background: radial-gradient(#5798ce 0%, #000 100%);

}

div#eve-lefteye { margin-left: 15px; transform: rotate(10deg); }

div#eve-righteye { margin-left: 85px; transform: rotate(-10deg); }

div#eve-body {

width: 180px;

height: 220px;

top: 152px;

border-bottom-left-radius: 90px 220px;

border-bottom-right-radius: 90px 220px;

border: 1px solid #999; border-top: none;

background: radial-gradient(40px 0, #fff, #fff 70%, #000);

}

div#eve-neck {

width: 180px; height: 60px;

background-color: #fff; top: -30px;

border-radius: 50%; border: 1px solid #999;

background: radial-gradient(90px 65px, #fff, #fff 55%, #888);

}

div.arm {

width: 40px;

height: 180px;

background: #fff; border: 1px solid #999;

}

div#eve-leftarm {

left: -45px;

border-top-left-radius: 30px 50px;

border-top-right-radius: 10px 40px;

border-bottom-left-radius: 30px 130px;

border-bottom-right-radius: 10px 140px;

transform: rotate(10deg);

}

div#eve-rightarm {

left: 180px;

border-top-right-radius: 30px 50px;

border-top-left-radius: 10px 40px;

border-bottom-right-radius: 30px 130px;

border-bottom-left-radius: 10px 140px;

transform: rotate(-10deg);

}

div#eve-shadow {

width: 180px;

height: 60px;

top: 300px;

border-radius: 50%;

box-shadow: 0px 100px 30px rgba(0, 0, 0, 0.3);

}

在CSS代码中，我们主要使用border-radius属性来制作Eva的轮廓。注意border-radius属性的两个值的设置：一个是垂直方向的弯曲程度，一个是水平方向的弯曲程度。如果是半圆形，就简单的只给一个值。

最后，Eva的手臂和眼睛通过 CSS3 rotate给一些轴向倾斜。到这里，小Eva就做好了，是不是很有意思呢？但是如果你想将它放到其它页面上，需要重新调整CSS代码，因为它没有响应式效果。这也是缺点之一。我们打算在下一个版本中使用SVG来制作它，这样一次制作，到处可用！