| 怎样用一个DIV绘制熊猫头像 | 您所在的位置：网站首页 › 如何画熊猫头 › 怎样用一个DIV绘制熊猫头像 |
怎样用一个DIV绘制熊猫头像
|
今天要给大家展示的是如何绘制一个熊猫头像，就是这个 如果这是用Photoshop绘制出来的，你也许并不感到奇怪。但是，我要告诉你这是HTML中的一个DIV，配合CSS3绘制出来的。 惊不惊喜！？意不意外！？ 一个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中，我们不仅可以定义渐变两边的颜色，还可以定义颜色渐变的距离：
第二步 耳朵和黑眼圈 现在来画熊猫的耳朵黑眼圈。我们唯一的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的属性的强大，巧妙运用这些属性，可以达成许多令人意想不到的效果！:-) |
【本文地址】