用纯CSS3绘制可爱大白面部

作者:课课家教育更新于： 2016-10-18 18:34:07

      电影《超能陆战队》中可爱的大白形象可谓红极一时，红到在技术圈都引起广泛的关注。程序员们都想着用自己熟悉的编程语言把这只大白给画出来，这当中自然也包括css3在内了。

　　二话不说，我们先来看看CSS3版本的效果图，想想CSS3诞生之前，画出这种巧夺天工的人物，web程序员们真是想都不敢想。

　　由于篇幅有限，本教程只介绍面部的画法，其它的大家可以类推。

　　还是那个套路，先来构建基础的html代码:

　　我们先给背景做了一些基本的设置，并且加入渐变填充来提升脸部的立体感。

　　radial-gradient代表的是放射状渐变，即从中心点开始，沿着半径从纯白过渡到浅灰。

       效果如下图所示：

　　接下来，大家可能觉得很奇怪，为什么只有一个元素呢？光看脸都有一双眼睛加一个嘴巴啊。没错，这里我们继续用before和after伪元素来构建不同的部分，为了体现before和after的对等关系，我们可以让before和after各负责绘制一只眼睛，然后嘴巴就拿来做元素的主体了。

　　由于嘴巴是一根线，所以用border来绘制会非常方便，然后我们用百分比定位使其居中。

　　.baymax{

　　border-bottom:1.5em solid #000;

　　position:absolute;

　　top:50%;

　　left:50%;

　　width:50%;

　　}

　　运行效果如下图所示：

　　怎么跑右边去了？这是因为坐标位置基于div的左上角，要使其以div中心为基准，我们可以利用CSS3的transform属性向左向上偏移div宽高的50%。

　　.baymax{

　　/*其它样式代码省略*/

　　transform:translate(-50%,-50%);

　　}

　　再次运行，效果就正确了：

　　接下来我们用before伪元素插入一只眼睛，它是个圆。如果大家之前有关注课课家的CSS3教程，那相信你们对椭圆的画法都很熟悉了，用圆角半径为50%的正方形即可。背景用黑色，跟眼睛的颜色一致。

　　.baymax::before{

　　background:#000;

　　border-radius:50%;

　　content:"";

　　position:absolute;

　　width:12em;

　　height:12em;

　　}

　　运行效果如下图所示：

　　然后适当调整下位置，让圆心对齐到边框的左边缘。当然了，左一点也没太大关系。

　　.baymax::before{

　　/*其它样式代码省略*/

　　left:-9em;

　　top:-6em;

　　}

　　运行效果如下图所示：

　　然后，眼睛太圆给人的感觉很“平面”，不像脸蛋上球形的眼睛，所以我们让它适当扭曲一下，在transform的各项属性里面，skew会把矩形扭曲为非直角的平行四边形，从而实现假3D的效果。

　　.baymax::before{

　　/*其它样式代码省略*/

　　transform:skewX(-4deg);

　　}

　　再次运行，感觉就出来了：

　　类似地，我们加上右眼。最大的不同在于，扭曲方向应该跟左眼相反，这样才可以让两边对称。

　　.baymax::after{

　　background:#000;

　　border-radius:50%;

　　content:"";

　　position:absolute;

　　width:12em;

　　height:12em;

　　right:-9em;

　　top:-6em;

　　transform:skewX(4deg);

　　}

　　然后，大白的脸部就绘制完成了，如下图所示：

　　为了让效果更加生动，我们不妨给大白加点动画，比如电影里面没电时的眨眼动作。

　　要实现眨眼动画的是before和after伪元素，我们打算通过background-position来进行修改，但这样做会导致眼睛闭上的时候，上方会留有空白，所以我们给眼白的部分加上一个接近白色的浅灰渐变，同时增大background-size使其可以实现滚动。

　　.baymax::before{

　　/*其它样式代码省略*/

　　background:linear-gradient(tobottom,#efefef,#efefef 50%,#000 50%,#000);

　　background-position:0-100%;

　　background-size:200%;

　　}

　　.baymax::after{

　　/*其它样式代码省略*/

　　background:linear-gradient(tobottom,#efefef,#efefef 50%,#000 50%,#000);

　　background-position:0-100%;

　　background-size:200%;

　　}

　　然后再为它们定义animation属性：

　　.baymax::before{

　　/*其它样式代码省略*/

　　-webkit-animation:blink 6s infinite;

　　-moz-animation:blink 6s infinite;

　　-o-animation:blink 6s infinite;

　　animation:blink 6s infinite;

　　}

　　.baymax::after{

　　/*其它样式代码省略*/

　　-webkit-animation:blink 6s 0.1s infinite;

　　-moz-animation:blink 6s 0.1s infinite;

　　-o-animation:blink 6s 0.1s infinite;

　　animation:blink 6s 0.1s infinite;

　　}

　　infinite是无穷的意思，代表动画不停循环播放。after中的0.1s代表延后0.1秒播放，这可以让两个眼睛的动画适当错开，看起来会更萌的哟~

　　blink是动画的名称，它通过@keyframes规则进行定义。

　　@keyframes blink{

　　0%,50%{

　　background-position:0 100%;

　　}

　　85%,95%{

　　background-position:0 75%;

　　}

　　100%{

　　background-position:0 100%;

　　}

　　}

　　@keyframes跟animation一样需要多个前缀兼容不同的浏览器，但全部贴出来代码太长了，所以此处省略。

　　这个动画在6秒（整个动画的持续时间）的前一半时间（即3秒），背景的位置在100%处静止不动，没有眨眼效果，然后从一半到85%的时间段（3秒到5.1秒）里面，背景向下滚动到75%，从而形成闭眼动画，接着停留10%的时间（0.6秒）后，再重新睁开眼睛，持续时间为5%，即0.3秒。

　　这么说比较抽象，大家直接测试下自己的文件就能观看完整的动画效果了。这样一个萌萌的大白面部就诞生了!你还不赶快动手试一试!