启发是看到一篇博客用css3写的一个叮当猫http://www.cnblogs.com/jr1993/p/4448025.html,于是自己就想写个小丸子了。
<!DOCTYPE html> <html> <head> <title>小论文看不下去系列1樱桃小丸子</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="xiaowanzi.css"> </head> <body> <div class="wrapper"> <div class="doraemon"> <div class="header"> <div class="hair1"> </div> <div class="hair2"> </div> <div class="hair3"> </div> <div class="hair4"> </div> <div class="hair5"> </div> <div class="hair6"> </div> <div class="hair7"> </div> <div class="hair8"> </div> <div class="hair9"> </div> <div class="face"> <div class="mei1"> </div> <div class="mei2"> </div> <div class="eyes1"> </div> <div class="eyes2"> </div> <div class="mouth"> </div> <div class="saihong1"> </div> <div class="saihong2"> </div> </div> </div> </div> </div> </body> </html>
2,css代码.wrapper{ height:200px; margin:50px; } .doraemon{ positive:relative } .header{ positive:relative; width:160px; height:100px; border:1px solid black; background-color:black; -webkit-border-radius:80px 80px 0px 0px; -moz-border-radius:50px; -ms-border-radius:50px; -o-border-radius:50px; } .face{ position:relative; width:100px; height:80px; top:-62px; left:25px; background-color:#ffe4c4; border:1px solid #696969; -webkit-border-radius:0px 0px 60px 60px; } .hair1{ position: relative; top:60px; left:50px; z-index:2; width:0px; height:0px; border-left:10px solid transparent; border-right:10px solid transparent; border-top:20px solid black; } .hair2{ position: relative; top:40px; left:40px; z-index:2; width:0px; height:0px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:12px solid black; } .hair3{ position: relative; top:28px; left:30px; z-index:2; width:0px; height:0px; border-left:3px solid transparent; border-right:8px solid transparent; border-top:10px solid black; } .hair4{ position: relative; top:18px; left:20px; z-index:2; width:0px; height:0px; border-left:3px solid transparent; border-right:5px solid transparent; border-top:8px solid black; } .hair5{ position: relative; top:10px; left:66px; z-index:2; width:0px; height:0px; border-left:10px solid transparent; border-right:8px solid transparent; border-top:25px solid black; } .hair6{ position: relative; top:-15px; left:80px; z-index:2; width:0px; height:0px; border-left:8px solid transparent; border-right:7px solid transparent; border-top:15px solid black; } .hair7{ position: relative; top:-30px; left:90px; z-index:2; width:0px; height:0px; border-left:10px solid transparent; border-right:5px solid transparent; border-top:10px solid black; } .hair8{ position: relative; top:-40px; left:100px; z-index:2; width:0px; height:0px; border-left:15px solid transparent; border-right:8px solid transparent; border-top:22px solid black; } .mei1{ position: relative; top:10px; left:8px; width:10px; z-index:2; height:10px; border:1px solid black; border-bottom:0; border-right:0; -webkit-border-radius:100px 0px 80px 0px ; } .mei2{ position: relative; top:0px; left:68px; width:15px; height:10px; z-index:2; height:10px; border:1px solid black; border-bottom:0; border-left:0; -webkit-border-radius:0px 100px 0px 70px ; } .eyes1{ position:relative; left:15px; z-index:2; width:10px; height:10px; border:1px solid black; border-bottom:0; border-right:0; -webkit-border-radius:120px 0 100px 0; transform:rotate(50deg); } .eyes2{ position:relative; top:-10px; left:65px; z-index:2; width:10px; height:10px; border:1px solid black; border-bottom:0; border-right:0; -webkit-border-radius:120px 0 100px 0; transform:rotate(80deg); } .mouth{ position:relative; left:35px; z-index:2; width:20px; height:20px; border:1px solid black; border-left:0; border-top:0; -webkit-border-radius:120px 0 100px 0; transform:rotate(50deg); } .saihong1{ position:relative; top:-20px; left:10px; z-index:2; width:10px; height:10px; background-color:#ffb6c1; -webkit-border-radius:5px 5px 5px 5px; transform:rotate(50deg); } .saihong2{ position:relative; top:-30px; left:75px; z-index:2; width:10px; height:10px; background-color:#ffb6c1; -webkit-border-radius:5px 5px 5px 5px; transform:rotate(50deg); }
主要是css的圆弧和三角的,半圆,圆形的画法