效果查看：http://hovertree.com/texiao/css3/6/
CSS3畫豬頭：http://hovertree.com/texiao/css3/6/1/
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>純CSS3實現可愛的豬豬 - 何問起</title><base target="_blank" />
<style type="text/css">
.hovertreebody {
position: relative;
top: 50px;
left: 50%;
width: 300px;
margin-left: -150px;
}
.stomach {
height: 200px;
width: 270px;
background: #FA7590;
border-radius: 50%;
border: 15px solid #000;
}
.face {
height: 180px;
width: 180px;
background: #FA7590;
border-radius: 50%;
border: 15px solid #000;
position: absolute;
top: -10px;
left: -30px;
}
.eyes:before,
.eyes:after {
content: "";
height: 25px;
width: 25px;
border-radius: 50%;
background: #000;
position: absolute;
top: 35px;
}
.eyes:before {
left: 40px;
}
.eyes:after {
right: 40px;
}
.nose {
background: #FCC0B6;
height: 50px;
width: 50px;
border: 15px solid #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -30px;color:green;
}
.nose:before,
.nose:after {
content: "";
height: 12px;
width: 12px;
border-radius: 50%;
background: #000;
position: absolute;
top: 18px;
}
.nose:before {
left: 10px;
}
.nose:after {
right: 10px;
}
.left_ear,
.right_ear {
overflow: hidden;
height: 70px;
width: 60px;
position: absolute;
background: transparent;
}
.left_ear {
top: -47px;
-webkit-transform: rotate(58deg);
transform: rotate(58deg);
}
.right_ear {
top: -52px;
left: 110px;
-webkit-transform: rotate(113deg);
transform: rotate(113deg);
}
.left_ear:before,
.right_ear:before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
content: "";
height: 50px;
width: 50px;
position: relative;
left: 15px;
display: block;
background: transparent;
background-color: #FCC0B6;
border: 15px solid #000;
border-radius: 5px 80px 30px 80px;
}
.left_leg,
.right_leg {
height: 20px;
width: 30px;
position: absolute;
background: #FCC0B6;
border: 15px solid #000;
position: absolute;
border-radius: 0 0 20px 20px;
bottom: -35px;
}
.left_leg {
left: 90px;
}
.right_leg {
left: 165px;
}
.left_leg:before,
.right_leg:before {
height: 25px;
background: #FA7590;
content: "";
position: absolute;
top: -25px;
width: 100%;
}
.hovertreetail {
height: 30px;
width: 30px;
border: 15px solid transparent;
border-bottom: 15px solid #000;
border-right: 15px solid #000;
border-radius: 50%;
position: absolute;
right: -30px;
top: 50px;
-webkit-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.hovertreetail:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
content: "";
height: 60px;
width: 60px;
border: 15px solid transparent;
border-bottom: 15px solid #000;
border-left: 15px solid #000;
border-right: 15px solid #000;
border-radius: 50%;
position: absolute;
right: -20px;
top: -19px;
}a{color:blue}
</style>
</head>
<body>
<div class="hovertreebody">
<div class="face">
<div class="left_ear"></div>
<div class="right_ear"></div>
<div class="eyes"></div>
<div class="nose">何問起</div>
</div>
<div class="stomach">
<div class="left_leg"></div>
<div class="right_leg"></div>
</div>
<div class="hovertreetail"></div>
</div>
<div style="text-align:center;margin-top:100px;"><a href="http://hovertree.com/h/bjaf/0pt35qks.htm">代碼</a> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a></div>
</body>
</html>