先展示一下我的头像吧。
作为一个前端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;
wid