摘要：在绘制琦玉的头像时，最重要的一个属性就是，我们用它可以画出圆形椭圆及各种变体。以下的样式能够画出琦玉的脸部形状在调整后，可画出眼鼻嘴的形状介绍属性也是一个很强大的属性，能够对元素做各种变形。
写这篇博客的起因是我看了Medium上的这篇文章：How I started drawing CSS Images，然后哇哦?，同样是前端开发，这区别怎么这么大呢？这位作者和我完全点了不同的技能点啊！
看了几个她在codepen上的作品，比如这个皮卡丘，发现用到的技术也并不多，于是我也想试试。
不过有哪个动漫中的人物足够简单，能够用几个基本的几何图形就画出来呢？我想到了一个人，于是我决定画一个《一拳超人》中的卤蛋，不对，是秃头披风侠——琦玉老师。
结果展示见下：
http://codepen.io/noiron/pen/...
从html文件中你可以看到这张图片实际上全部是由div元素组合而成的，一共用到了15个div。在给一个div元素加上适当的css样式后，就形成了脸上的一个部位。
在绘制琦玉的头像时，最重要的一个css属性就是border-radius，我们用它可以画出圆形、椭圆及各种变体。图中的脸部轮廓、眼睛、耳朵的形状都是由border-radius来实现的，稍后将介绍其使用方法。
另一个需要说明的css属性是transform，可以实现平移和旋转。
border-radius 介绍之前我对border-radius的认识只局限于可以给元素加上圆角，以及将其值设为50%可以让矩形显示为圆形。查了些资料后，才发现可以用它画出许多图形。
border-radius是以下四个属性的简写，每一个属性用于设置一个角的形状：
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
图片来自MDN
从上图可以看出当只设置一个值或设置两个相同的值时，显示为圆；设置两个不同的值时，显示为椭圆。以border-top-left-radius为例：
/* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipsis */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em;
若是简写形式，则写成如下格式：
border-radius: 48% 48% 50% 50% / 42% 42% 54% 54%;
"/"之前的四个值表示水平轴的长度，"/"之后的四个值表示垂直轴的长度，当水平轴的长度和垂直轴的长度相等时，可以省略"/"及之后的这一组值。
对于同一组的四个数值，也有简写方式。方法与 padding 和 margin 的简写类似，第一个值与第三个值相同或第二个值与第四个值相同时，可以只写一遍。
在了解了border-radius的用法后，通过给div元素合适的宽高比，在调整四个圆角的半径，就能够获得你想要的形状了。
// 以下的样式能够画出琦玉的脸部形状
// 在调整width, height, border-radius 后，可画出眼、鼻、嘴的形状
#div1 {
width: 100px;
height: 144px;
border: 2px solid #000;
border-radius: 48% 48% 50% 50% / 42% 42% 54% 54%;
}
transform 介绍
transform属性也是一个很强大的属性，能够对元素做各种变形。不过我们这里只需要用它来进行平移和旋转的操作。
/* 可以用 translate 来实现平移操作 */ /* translate() 的两个参数分别表示水平方向和垂直方向的平移距离 */ transform: translate(12px, 50%); /* 上面这一行与下面的这两行是等价的 */ transform: translateX(12px); transform: translateY(50%); /* 顺时针旋转20度 */ transform: rotate(20deg);组合得到最终结果
在你已经将琦玉头像进行拆解，把各个部分都用一个div来表示并加上了合适的样式后，就能将它们组合起来了。你可以用transform来调整它们的距离，或者直接用absoulte定位。
最后就得到了琦玉的头像：
额，秃子，你谁啊！？
看来不是所有的光头都叫琦玉，还需要对细节进行一点调整：
OK，这样就有点像琦玉老师了。最后，如果你愿意的话，还可以用transition属性来稍微加上点动画效果。
再放一遍代码地址：
Codepen代码及展示
本文在我的博客上的地址：
如何用 html 和 css 画一拳超人
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111895.html
摘要：今天小编来为大家介绍一个叫做的模块，我们可以用它来绘制高清的交互式地图，并且标注出重要的地理位置等等，读者在看过本篇文章之后，读者大致会掌握使用来进行交互式地图的绘制在地图上标注出重要的建筑物安装模块画一张最简单的地图我们先来绘制一张 今天小编来为大家介绍一个叫做Folium的模块，我们...
摘要：每一个阴影属性值就可以绘制出一个圆点，因为可以接收多个属性性，所以就可以用多个圆点来画点阵图了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/KLvENb 可交互视频 此视频...
摘要：每一个阴影属性值就可以绘制出一个圆点，因为可以接收多个属性性，所以就可以用多个圆点来画点阵图了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/KLvENb 可交互视频 此视频...
摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽 仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用c...
阅读 2023·2021-11-15 11:36
阅读 1127·2021-10-14 09:42
阅读 3920·2021-09-30 09:52
阅读 1542·2021-09-24 10:24
阅读 820·2021-09-02 09:56
阅读 2531·2019-08-30 13:11
阅读 2929·2019-08-30 13:06
阅读 787·2019-08-30 12:56
