怎样用一个DIV绘制熊猫头像

今天要给大家展示的是如何绘制一个熊猫头像，就是这个

如果这是用Photoshop绘制出来的，你也许并不感到奇怪。但是，我要告诉你这是HTML中的一个DIV，配合CSS3绘制出来的。

惊不惊喜！？意不意外！？

一个DIV上怎么做出这样复杂的效果？本篇就来一步步教教你这是如何实现的。

第一步，先从熊猫脸说起

我们先从熊猫的脸、鼻子和嘴讲起，因为这些都是用同一个DIV渲染出来的，所以首先，我们得有个DIV：

<div></div>

很简单吧。然后利用CSS3的border属性，勾勒出熊猫的脸：

div {width: 210px;height: 160px;border: 5px solid #333;
}

你也许会想：这TM在逗我？！这明明就是个矩形，哪有熊猫脸是个框？别急，请放下手中的菜刀继续看，记得CSS3中的border-radius属性吗？border-radius可以制作出各种各样的圆角，我们就用border-radius属性把脸“揉揉”圆：

div {/* 接着刚才的代码 */border-top-left-radius: 110px;border-top-right-radius: 110px;border-bottom-left-radius: 110px 60px;border-bottom-right-radius: 110px 60px;
}

这样，熊猫标准的包子脸就完成了：

“面子”的问题解决了，鼻子和嘴怎么画？什么，再写两个DIV？只能用一个DIV哦！

这就要运用到CSS3的径向渐变（radial-gradient）了，径向渐变是啥？只说学名你可能不知道，但一看图肯定就懂了：

这就是径向渐变，以一个中心，辐射出一个颜色渐变的椭圆。CSS3中的radial-gradient属性就是干这个事情的，radial-gradient用起来很简单，来看看它的完整语法：

radial-gradient([[ circle || ][ at ]?,|[ ellipse || [ | ]{2} ][ at ]?,|[ [ circle | ellipse ] || ][ at ]?, | at ,]? [ , ]+ ) = closest-corner | closest-side | farthest-corner | farthest-side and = [ | ]?

是不是要看疯了：这TM叫简单？！不懂的还以为是乱码。。。请你把菜刀再放一放再听我说，虽然radial-gradient的完整语法很复杂，但我们只用到其中三个参数，简单说我们只需要告诉radial-gradient：

渐变的中心在哪，辐射的形状是圆还是椭圆（参数1）

从什么颜色（参数2）渐变到什么颜色（参数3）

怎么样，这样清楚了吧。那么我们用radial-gradient画上鼻子和嘴：

div {/* 接着刚才的代码 */background-image: radial-gradient(ellipse at 50% 60%, #333 12px, transparent 12px), radial-gradient(ellipse at 50% 80%, #555 6px, transparent 6px);
}

你可能不了解颜色值后面的px值是什么意思，别急，一会儿就会讲到，先来看看目前的效果：

你可能会问：radial-gradient实现的圆是渐变的，图中是怎么画出一个实心圆的？这儿就有个小技巧了：radial-gradient中，我们不仅可以定义渐变两边的颜色，还可以定义颜色渐变的距离：

对比上下两种渐变，可以明显地看到，当两种颜色的渐变距离比较远时，渐变过程比较缓和；而当渐变距离很近时，渐变的过程就很剧烈。那么，当两个颜色的渐变距离为0，会怎么样？

你会发现渐变效果完全消失了。看到这儿应该就能明白radial-gradient中，颜色值后面的px含义了：定义了该渐变两个颜色的两个端点。熊猫的鼻子和嘴就是由黑色和白色的径向渐变构成的，只不过因为渐变距离为0，所以就完全去除了渐变效果。

第二步　耳朵和黑眼圈

现在来画熊猫的耳朵黑眼圈。我们唯一的DIV已经作为熊猫脸了，用什么来充当黑眼圈呢？你是否想起了CSS3中的 :before、:after伪元素，伪元素默认不可见，但可以用CSS让它们展示出来。伪元素的操作方式和普通DIV一样，所以有了:before、:after伪元素，我们就凭空多出两个“DIV”。

没错，我们只要将:before、:after两个伪元素展示出来，加上黑色背景以及圆角，就成熊猫的黑眼圈了：

div::before, div::after {width: 70px;height: 40px;  background-color: #333;border-radius: 50% 50% 45% 42%;display: block;content: '';position: absolute;  top: 65px;
}
div::before {left: 44px;  transform: rotate(-45deg);
}
div::after {left: 125px;  transform: rotate(45deg);
}

写完代码后效果如下：

既然伪元素被黑眼圈占用了，就要发愁熊猫的耳朵如何实现了。幸好，山穷水复疑无路，柳暗花明又一村，你是否又想起了CSS3的box-shadow属性？

仔细看黑眼圈和耳朵，会发现它们的外形是一致的。恰好可以利用上box-shadow的性质：元素阴影的外形根据元素本身的形状而定。没错儿，两只耳朵就用它实现了！

div::before {/* 接着刚才的代码 */box-shadow: 10px -68px 0 -4px #333;
}
div::after {/* 接着刚才的代码 */box-shadow:-10px -68px 0 -4px #333;
}

让我们停下脚步，看看当前的效果：

不错，已经初步成型了。如果能看到这里，说明你已经学会了本篇中绝大部分CSS3的知识。现在就差最后的点睛之笔了！

第三步眼睛 & 点缀

相比之前使用的技巧，眼睛的画法就没有什么神奇，依然是运用了radial-gradient属性，前面已经介绍过radial-gradient可以画出实心圆，这里再告诉你它的另外一个特性：radial-gradient可以互相叠加。于是，就可以实现熊猫眼睛中的眼白、瞳孔互相叠加的效果了：

div::before {/* 接着刚才的代码 */background-image:radial-gradient(circle at 51px 20px, white 3px, transparent 3px),radial-gradient(circle at 46px 20px, #333 7px, transparent 7px),radial-gradient(circle at 45px 20px, white 10px, transparent 10px)
}
div::after {/* 接着刚才的代码 */background-image:radial-gradient(circle at 24px 15px,white 3px, transparent 3px),radial-gradient(circle at 24px 20px,#333 7px, transparent 7px),radial-gradient(circle at 25px 20px,white 10px, transparent 10px)
}

添加完代码之后的效果：

最后，再对图形做两个细节上调整：

加厚脸型底部的厚度，增加些“熊样”
在底部增加一些阴影，是图形具备些立体感

div {/* 接着之前的代码 */border-bottom-width: 10px;box-shadow: inset 10px -10px 0 #eee;
}

大功告成！

终于，我们用单个DIV配合CSS3完成了一幅可爱的熊猫头像，是不是很有成就感的呢？别急别急，这还仅仅只是一个熊猫而已，如果你对单DIV绘制图形感兴趣，可以访问这个链接：

http://a.singlediv.com/

没错，这些图形都是仅用一个DIV做成的，其中大量地运用了border-radius、radial-gradient、box-shadow、:before和:after伪元素这些属性。本文讲解的熊猫头像，也来自于这个网站。

通过本篇的讲解，我们了解到了CSS3的属性的强大，巧妙运用这些属性，可以达成许多令人意想不到的效果！:-)

怎样用一个DIV绘制熊猫头像相关推荐

用一个div绘制背景流动网格特效
文章目录如何利用css绘制水平垂直直线组成网格如何形成流动网格效果如何平面流动网格图看起来像个背景效果完整代码如何利用css绘制水平垂直直线组成网格利用css3llinear-gradie ...
绘制多边形_PS学习教程！教你绘制低多边形星空效果熊猫头像
低多边形风格介于抽象与象形之间,是一种表现力很强的插画类型,用于LOGO的设计也未尝不可.它的绘制过程也非常简单,尤其在AI中,利用三角色块一个个拼缀而成即可,设计师要做的是对色彩的选择和控制,以便能 ...
一个DIV的芝士汉堡制作
一个DIV的芝士汉堡制作项目Github地址:点击跳转最近看到了一篇英文文章,正好看看看着也饿了,打算自己好好做一个这样的芝士汉堡,品尝一下芝士汉堡的乐趣那么绘制如下 HTML html绘制非常 ...
用python绘制熊猫图案_使用熊猫在Python中绘制数据
用python绘制熊猫图案在关于基于Python的绘图库的系列文章中 ,我们将对使用pandas(一种非常流行的Python数据操作库)的绘图进行概念性的研究. Pandas是Python中用于可缩 ...
css：使用div绘制一条竖线
1.准备一个内容为空的div 2.给div设置宽高,宽度给小一点的值,竖线需要多长,就设置多高 3.只给div设置右边框(或者边框) 最终效果图: 使用div绘制竖线的优点是垂直居中更容易实现,竖线长 ...
processing制作熊猫头像跟随鼠标拖尾
先上效果图: 我演示时电脑有点卡所以看着有些顺畅,你的电脑应该是没有问题的. processing实现跟随鼠标拖尾其实不难,在这篇文章中我将介绍图案封装.封装图案整体缩放.数组的创建方法以及一些逻辑处 ...
小程序canvas绘制微信头像
微信小程序canvas是不支持绘制网络图片的,所以逻辑就是先下载到本地,使用本地临时路径去绘制: // 查看是否授权wx.getSetting({success(res) {if (res.authS ...
用HTML5构建一个流程图绘制工具
在我们的开发工程中经常会使用到各种图,所谓的图就是由节点和节点之间的连接所形成的系统,数学上专门有一个分支叫图论(Graph Theroy).利用图我们可以做很多工具,比如思维导图,流程图,状态机,组 ...
一个DIV调用多个CSS样式
1使用以上两个CSS样式表对描述同一个DIV的写法class利用class可以对于同一个标签多重定义样式. 比如用1.2两种样式同时控制一个DIV,可以写成以下格式: <div class=&q ...

怎样用一个DIV绘制熊猫头像

怎样用一个DIV绘制熊猫头像相关推荐

最新文章

热门文章