先展示一下我的头像吧。
作为一个前端ER,我的头像当然不能是绘画工具画出来的。没错,这个玩意是由HTML+CSS代码实现的,过年的某一天晚上无聊花了一个小时敲出来的。来看看它原本的样子:
为什么会变成第一张图的样子呢。那个呆萌的线条猫其实是IE的杰作。
下面贴出源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3绘制机器猫头像</title> <style type="text/css"> #head{ 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; 207px; height: 120px; } #lefteye,#righteye{ position: absolute; display: inline-block; 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; 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; 350px; height: 280px; border-radius: 230px; border: 2px solid black; background: white; } #nose{ position: relative; top: 32px; margin: 0 auto; 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; 307px; height: 50px; } #leftmustache{ position: absolute; left: 0; } #rightmustache{ position: absolute; right: 0; } #lm1,#rm1{ 80px; height: 3px; background: black; margin-bottom: 13px; } #lm2,#rm2{ 78px; height: 3px; background: black; } #lm3,#rm3{ 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; 3px; background: black; } #mouse{ 300px; height: 100px; position: relative; margin: 0 auto; top: -82px; overflow: hidden; } #mouseline{ position: relative; top: -242px; margin: 0 auto; 300px; height: 300px; border-radius: 150px; border: 3px solid black; } #neck{ position: relative; z-index: 10; top: 5px; margin: 0 auto; 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; 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; 100%; height: 2px; } #ring #l2{ top: 16px; 100%; height: 2px; } #ring #l3{ margin: 0 auto; top: 22px; 16px; height: 15px; border-radius: 8px; } #ring #l4{ top: 8px; height: 100%; 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猫~
代码未经优化,可能在方法上会有冗余~
用简单的代码画一些简笔形象,相信还是很有乐趣的。有空的时候大家也可以尝试一下。~~