用纯CSS3绘制安卓机器人

作者:课课家教育更新于： 2016-10-14 17:28:37

       说到纯css3的绘图教程，小编之前可是不遗余力地整理了好多，在网站上的热度也非常高，相信大家现在对各种基本的CSS3绘图技巧都已经稔熟于心。然而对于想练手的朋友来说，难点往往不在于怎么画，而是该画什么，这就涉及灵感的问题了。

　　所以这样的教程，小编见一个就收一个，案例越丰富，大家可以画的东西也越多。比如安卓机器人的Logo，虽然不用水果机的朋友天天都对着它，但是能用CSS3把它实现出来的朋友就真的是凤毛麟角了，然而还是有人把它给做了出来。为此小编把这一件小作品整理成教程，它既能帮助大家激发创作灵感，也可以作为一篇不错的入门教程供新手学习。

　　跟前面的绘图教程相类似，本例我们也用before和after伪元素来节省实际元素的数量，所以基础的html代码会比较简单，两侧对称的元素（比如眼睛，手臂）都可以分别在同一个元素上的before和after伪元素上进行绘制。

　　先来看看基础的HTML代码

　　我们给背景设置了黑色，并且考虑到机器人内部的元素要相互重叠，所以使用了相对定位，让内部元素在使用绝对定位的时候以Android层的左上角作为参考点。

　　安卓机器人是个轴对称图形，为了方便对位，我们希望对称轴是y坐标，即x=0。这时候，图形左侧的部分就会被挡住了，所以我们右移一下，顺便也向下移动一定的像素。

　　.android{

　　position:relative;

　　left:320px;

　　top:230px;

　　}

　　既然中心往右下方向偏移了，那么我们不妨从中心点出发，先绘制出身体部分。它是个矩形，下面两个是圆角。

　　.body{

　　position:absolute;

　　width:336px;

　　height:285px;

　　background-color:#A5C63B;

　　border-radius:0px 0px 30px 30px;

　　}

　　4个角的圆角半径可以写到一行上，并且以英文空格隔开，顺序依次为左上，右上，右下，左下，即从左上角开始顺时针数下来。

　　大家看清楚body和.body的区别哦。

　　运行效果如下图所示

　　接下来，我们用before和after元素给机器人插入一双腿。

　　腿的形状一样，结构跟身体相类似，都是有两个圆角的矩形，所以我们可以一起定义。

　　.body:before,

　　.body:after{

　　background-color:#A5C63B;

　　content:'';

　　width:75px;

　　height:122px;

　　bottom:-122px;

　　position:absolute;

　　border-radius:0px 0px 50px 50px;

　　}

　　y坐标也放到公用的部分了，因为两个腿的垂直高度一致。

　　运行效果如下图所示

　　接下来，我们通过调整left属性来让两腿的位置错开。由于是轴对称图形，因此一个腿跟身体左侧的距离等于另一个腿跟身体右侧的距离。所以，一个用left，一个用right，对位会更加准确方便。

　　.body:before{

　　left:68px;

　　}

　　.body:after{

　　right:68px;

　　}

　　运行效果如下图所示

　　接着我们弄下头部，头部是一个类似于半圆的形状。还记得小编整理的《CSS3基本形状汇总》吗？那里介绍了半圆的绘制方法。把矩形的高度设置为宽度的一半，然后圆角半径等于高度，那么整个高度就被圆角占据，左右两侧的直边也就看不见了。

　　不过安卓机器人有一小块平头，所以高度应该比宽度的一半要小一些。

　　.head{

　　width:336px;

　　height:155px;

　　background-color:#A5C63B;

　　border-radius:155px 155px 0px 0px;

　　position:absolute;

　　top:-170px;

　　}

　　top等于170px没有任何科学依据，多次测试调整到满意的结果即可。

　　运行效果如下图所示

　　头顶有两根对称的天线，我们能明显感觉到它们是头部的附属物，所以用before和after伪元素来插入就再合适不过了。

　　说白了天线也是带两个圆角的矩形，只是看起来很窄，并且旋转了一定的角度。旋转我们可以用transform:rotate(xdeg)来实现，x等于你要旋转的角度，显然两根天线的角度绝对值相等，符号相反。

　　跟body一样，公用的部分（包括top）一起定义。

　　.head:before,

　　.head:after{

　　background-color:#A5C63B;

　　content:'';

　　width:10px;

　　height:53px;

　　position:absolute;

　　top:-30px;

　　border-radius:20px 20px 0px 0px;

　　}

　　运行效果如下图所示

　　接着我们来分别调整它们的位置和旋转，经测试，旋转30度的效果比较好。

　　稍微提一点，由于旋转涉及中心点，所以平移我们也用transform来实现，这样处理起来比直接设置left和right方便一些。

　　.head:after{

　　-webkit-transform:translate(63px,0px)rotate(-30deg);

　　-moz-transform:translate(63px,0px)rotate(-30deg);

　　-o-transform:translate(63px,0px)rotate(-30deg);

　　transform:translate(63px,0px)rotate(-30deg);

　　}

　　.head:before{

　　-webkit-transform:translate(255px,0px)rotate(30deg);

　　-moz-transform:translate(255px,0px)rotate(30deg);

　　-o-transform:translate(255px,0px)rotate(30deg);

　　transform:translate(255px,0px)rotate(30deg);

　　}

　　transform需要用不同前缀兼容不同的浏览器，运行效果如下图所示。

　　最后，就差手臂和眼睛了。身体和头部的伪元素已经用完，所以基础HTML代码中包含了眼睛和手这两个元素。我们让元素本体保留空白，接着继续用它们的before和after伪元素创建相互对称的两个部件。

　　先来绘制手臂，before和after也可以一起定义。但跟前面不一样的是，这次4个角都是圆角，并且大小相等，所以写起来也相对容易点，border-radius不需要分开4个值来写。

　　.arms:before,

　　.arms:after{

　　background-color:#A5C63B;

　　content:'';

　　width:75px;

　　height:233px;

　　top:-8px;

　　position:absolute;

　　border-radius:40px;

　　}

　　运行效果如下图所示

　　手臂偷偷躲在了身体里面，只在身体和头部之间的缝隙看到了一个小圆角。

　　下面我们分开设置两个手臂的位置。跟上面一样，一个用left，一个用right。

　　.arms:before{

　　left:-90px;

　　}

　　.arms:after{

　　right:-90px;

　　}

　　用负数代表左侧的元素（before）在身体左边缘以外，右侧的元素（after）在身体右边缘以外，效果如下图所示。

　　然后就只差眼睛了，眼睛是圆形，用圆角半径等于50%的正方形即可。

　　现在大家熟悉了规律，小编就不再把before和after单独设置的部分分开写了。

　　.eyes:before,

　　.eyes:after{

　　background-color:#FFFFFF;

　　content:'';

　　width:27px;

　　height:27px;

　　top:68px;

　　position:absolute;

　　border-radius:50%;

　　}

　　.eyes:before{

　　left:78px;

　　}

　　.eyes:after{

　　right:78px;

　　}

　　运行效果如下图所示。至此，安卓机器人的绘制大功告成！

　　绘制安卓机器人的核心技术在于圆角矩形的使用，利用CSS3的这个新属性，我们可以衍生出半圆，椭圆，圆角直线等其它形状，这些形状的制作在CSS3绘图里面都特别常用。总的来说，本教程涉及的知识点很少，也很简单，但却蕴含着丰富的绘图技巧，是一篇非常适合初学者入门的实例教程。至于高手，你们要是想不到该教徒弟画些什么的话，就不妨收藏本教程，新手问到的时候就推荐给他们，让他们体验下CSS3简单实用的一面，从而加强CSS3对初学者们的亲和力。