先展示一下我的头像吧。
作为一个前端ER，我的头像当然不能是绘画工具画出来的。没错，这个玩意是由HTML+CSS代码实现的，过年的某一天晚上无聊花了一个小时敲出来的。来看看它原本的样子：
为什么会变成第一张图的样子呢。那个呆萌的线条猫其实是IE的杰作。
下面贴出源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3绘制机器猫头像</title>
<style type="text/css">
#head{
width: 460px;
height: 440px;
border: 2px solid rgb(41,102,123);
border-radius: 220px;
background-image: -moz-linear-gradient(left bottom,rgb(7,105,134),rgb(127,218,247));
background-image: -webkit-linear-gradient(left bottom,rgb(7,105,134),rgb(127,218,247));
}
#eyes{
position: relative;
top: 63px;
margin: 0 auto;
width: 207px;
height: 120px;
}
#lefteye,#righteye{
position: absolute;
display: inline-block;
width: 100px;
height: 120px;
border: 2px solid black;
border-radius: 50px;
background: white;
z-index: 3;
}
#righteye{
right: 0;
}
#lefteyeball,#righteyeball{
position: absolute;
top: 70px;
background: black;
width: 20px;
height: 20px;
border-radius: 10px;
}
#lefteyeball{
right: 5px;
top: 62px;
/*-moz-animation: leyeballMove 1s;*/
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
#righteyeball{
left: 5px;
top: 62px;
/*-moz-animation: reyeballMove 1s;*/
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
#face{
position: relative;
z-index: 2;
margin: 0 auto;
top: 13px;
width: 350px;
height: 280px;
border-radius: 230px;
border: 2px solid black;
background: white;
}
#nose{
position: relative;
top: 32px;
margin: 0 auto;
width: 41px;
height: 41px;
border: 2px solid black;
border-radius: 22px;
background-image: radial-gradient(11px 11px at 30px 17px,rgb(255,255,255),rgb(208,56,7));
}
#mustache{
position: relative;
top: 60px;
margin: 0 auto;
width: 307px;
height: 50px;
}
#leftmustache{
position: absolute;
left: 0;
}
#rightmustache{
position: absolute;
right: 0;
}
#lm1,#rm1{
width: 80px;
height: 3px;
background: black;
margin-bottom: 13px;
}
#lm2,#rm2{
width: 78px;
height: 3px;
background: black;
}
#lm3,#rm3{
width: 80px;
height: 3px;
background: black;
margin-top: 13px;
}
#lm1{
transform-origin: 70px 0;
transform: rotate(20deg);
}
#lm3{
transform-origin: 70px 0;
transform: rotate(-20deg);
}
#rm1{
transform-origin: 10px 0;
transform: rotate(-20deg);
}
#rm3{
transform-origin: 10px 0;
transform: rotate(20deg);
}
#line{
position: relative;
margin: 0 auto;
top: -18px;
height: 160px;
width: 3px;
background: black;
}
#mouse{
width: 300px;
height: 100px;
position: relative;
margin: 0 auto;
top: -82px;
overflow: hidden;
}
#mouseline{
position: relative;
top: -242px;
margin: 0 auto;
width: 300px;
height: 300px;
border-radius: 150px;
border: 3px solid black; }
#neck{
position: relative;
z-index: 10;
top: 5px;
margin: 0 auto;
width: 297px;
height: 30px;
border: 2px solid black;
border-radius: 16px;
background-image: -moz-linear-gradient(top,rgb(195,64,20),rgb(121,13,11));
background-image: -webkit-linear-gradient(top,rgb(195,64,20),rgb(121,13,11));
}
#ring{
position: relative;
top: 10px;
margin: 0 auto;
width: 50px;
height: 50px;
border:2px solid black;
border-radius: 50px;
background-image: radial-gradient(21px 21px at 30px 17px,rgb(255,255,179),rgb(188,182,24));
overflow: hidden;
}
#l1,#l2,#l3,#l4{
position: relative;
background: black;
}
#ring #l1{
top: 13px;
width: 100%;
height: 2px;
}
#ring #l2{
top: 16px;
width: 100%;
height: 2px;
}
#ring #l3{
margin: 0 auto;
top: 22px;
width: 16px;
height: 15px;
border-radius: 8px;
}
#ring #l4{
top: 8px;
height: 100%;
width: 3px;
margin: 0 auto;
} @-moz-keyframes leyeballMove{
0%{
right: 5px;
top: 62px;
}
25%{
right: 20px;
top: 90px;
}
50%{
right: 40px;
top: 95px;
}
75%{
right: 60px;
top: 90px;
}
100%{
right: 75px;
top: 62px;
}
}
@-moz-keyframes reyeballMove{
0%{
left: 5px;
top: 62px;
}
25%{
left: 20px;
top: 90px;
}
50%{
left: 40px;
top: 95px;
}
75%{
left: 60px;
top: 90px;
}
100%{
left: 75px;
top: 62px;
}
}
</style>
</head>
<body>
<div id="head">
<div id="eyes">
<div id="lefteye">
<div id="lefteyeball"></div>
</div>
<div id="righteye">
<div id="righteyeball"></div>
</div>
</div>
<div id="face">
<div id="nose"></div>
<div id="mustache">
<div id="leftmustache">
<div id="lm1"></div>
<div id="lm2"></div>
<div id="lm3"></div>
</div>
<div id="rightmustache">
<div id="rm1"></div>
<div id="rm2"></div>
<div id="rm3"></div>
</div>
</div>
<div id="line"></div>
<div id="mouse">
<div id="mouseline"></div>
</div>
</div>
<div id="neck">
<div id="ring">
<div id="l1"></div>
<div id="l2"></div>
<div id="l3"></div>
<div id="l4"></div>
</div>
</div>
</div>
</body>
</html>
当中主要用到了CSS3的渐变、旋转、圆角等特性，进行绘图的。 然而完全只考虑了火狐的效果，完全未考虑兼容问题，于是才有了各种各样的猫：
这是火狐猫
这是IE11猫
IE9猫~
IE8猫~
IE7猫~
代码未经优化，可能在方法上会有冗余~
用简单的代码画一些简笔形象，相信还是很有乐趣的。有空的时候大家也可以尝试一下。~~