码迷,mamicode.com
首页 > Web开发 > 详细

纯CSS实现的非常酷的卡通肖像,艺术与编程结合的典范

时间:2014-06-29 23:33:43      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:css   卡通人物   html5   绘画   

产品设计技术趋势

当前产品设计和开发的一个主要技术趋势除了响应式外,

还有尽量使用CSS/HTML5技术替代图片,这样可以获得很好的设计扩展性和页面访问性能。

CSS卡通实例

下面就是一个英国WEB工程师设计开发的一个非常酷的卡通头像,使用纯CSS实现,还可以简单的切换肤色:)

bubuko.com,布布扣

示范页面访问链接,辛普森家族头像

注:辛普森家族(Simpson family)是美国动画情景喜剧《辛普森一家》中的一支虚构家族。

使用的技术

和艺术家素描使用的技术有异曲同工之处,首先把每个人物的脸拆解为不同的形状,然后逐步拼凑成肖像。下面就是拆解后的辛普森人物模型:

bubuko.com,布布扣

按照上述模型,依次构造出头发、头部、眼睛、鼻子、耳朵、嘴巴、下巴、脖子的CSS DIV块,然后使用绝对位置拼在一起,

Bart的“头部”示范CSS代码如下:

position: absolute;
top: 20px;
left: 33px;
width: 9px;
height: 7px;
background: #fbd800;
border-top: 1px solid #110b00;
border-left: 1px solid #110b00;
-webkit-transform: rotate(25deg) skew(23deg, 16deg);
-ms-transform: rotate(25deg) skew(23deg, 16deg);
transform: rotate(25deg) skew(23deg, 16deg);
-webkit-border-radius: 2px 0 0 0;
-moz-border-radius: 2px 0 0 0;
border-radius: 2px 0 0 0;

更多CSS代码请访问示范代码页面。


by iefreer

纯CSS实现的非常酷的卡通肖像,艺术与编程结合的典范,布布扣,bubuko.com

纯CSS实现的非常酷的卡通肖像,艺术与编程结合的典范

标签:css   卡通人物   html5   绘画   

原文地址:http://blog.csdn.net/iefreer/article/details/35608917

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!