如何用 html 和 css 画一拳超人
写这篇博客的起因是我看了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 画一拳超人
如何用 html 和 css 画一拳超人相关推荐
- 用html和css画画,如何用 html 和 css 画一拳超人
写这篇博客的起因是我看了Medium上的这篇文章:How I started drawing CSS Images,然后哇哦?,同样是前端开发,这区别怎么这么大呢?这位作者和我完全点了不同的技能点啊! ...
- css习题(如何用html和css画三角形(等腰和直角))
用HTML语言和css语言画一个等腰三角形和一个直角三角形 以下是HTML页面的代码: <html><head><meta charst="utf-8" ...
- 如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
- css画心形原理,如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
- 扇形图形用html,如何用css画扇形?
如何用css画扇形?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.使用border-radius属性画扇形 示例: div{ border-radi ...
- html中怎么写正六边形,如何用css画正六边形?用css画正六边形的两种方法(代码实例)...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
- 如何用CSS画一个三角形?
hello,大家好,最近在看前端的八股,里面有这样一道题,如何用CSS画出三角形?我想以这个题为例,仔细讲一下这个题的技巧,以及对这道题拓展一下,即如何画出圆形和椭圆形? 首先,如何用CSS画一个三角 ...
- splitpane如何设置竖条的宽度_如何用 CSS 画三角形和箭头
三角形和箭头这两个图标在网页中经常会用到,例如:下拉选择框.排序.返回到上一页.导航条,分页都会用到三角形或者箭头,当然是用图片的方式的确可以实现这一样式,但是是用图片如果调整颜色那就比较困难了,除非 ...
- 用html css实现五角星,用CSS画五角星
五角星 #star-five { margin: 50px; position: relative; display: block; color: red; width: 0; height: 0; ...
最新文章
- Flutter开发之Stack组件(层叠布局)(19)
- OpenStack 高性能虚拟机之大页内存
- java mysql jtds_JAVA 使用jtds 连接sql server数据库
- GDataXML解析XML文档
- ILRuntime_NewbieGuide—入门
- JS面向对象——原型式继承函数、寄生式继承函数、寄生组合式继承
- VR究竟多奇幻?eSmart邀你共赴一场VR奇幻之旅!
- Java ObjectInputStream registerValidation()方法与示例
- 【Java数据结构与算法】第二十章 Dijkstra算法和Floyd算法
- 单片机蜂鸣器编程音乐_单片机系统硬件调试方法
- Teamviwer和向日葵使用
- 在js中为什么0.1+0.2不等于0.3
- 数据库数据模型(关系型模型与非关系模型的区别)
- [Ubuntu] LightDM 轻量级桌面显示管理器
- 不打开Excel文件读取工作表名(ADOX)
- MybatisPlus实现多条件拼接动态查询
- keil5下载仿真出现Flash download failed-Cortex-M3的原因与方案
- 苹果付费app共享公众号_【苹果iOS付费游戏应用帐号分享】新增一款25元iOS游戏应用共享帐号...
- 抖音常见的几种违规行为,抖音新手应该注意防范:国仁楠哥
- 【超级炫酷的旋转特效——html实现(附源代码)】