纯CSS实现的非常酷的卡通肖像，艺术与编程结合的典范
浏览数：18 /
时间：2015年06月09日
产品设计技术趋势
当前产品设计和开发的一个主要技术趋势除了响应式外，
还有尽量使用CSS/HTML5技术替代图片，这样可以获得很好的设计扩展性和页面访问性能。
CSS卡通实例
下面就是一个英国WEB工程师设计开发的一个非常酷的卡通头像，使用纯CSS实现，还可以简单的切换肤色：）
示范页面访问链接，辛普森家族头像
注：辛普森家族（Simpson family）是美国动画情景喜剧《辛普森一家》中的一支虚构家族。
使用的技术
和艺术家素描使用的技术有异曲同工之处，首先把每个人物的脸拆解为不同的形状，然后逐步拼凑成肖像。下面就是拆解后的辛普森人物模型：
按照上述模型，依次构造出头发、头部、眼睛、鼻子、耳朵、嘴巴、下巴、脖子的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代码请访问示范代码页面。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
