CSS3打造熊MM

CSS3打造熊MM

先来晒晒咱这美图，呵呵……

查看DEMO（建议大家在现代浏览器下查看demo哦……原因、你懂的……）

原理解析：

实现原理很简单，几乎是圆圈堆圆圈，当然这里要注意的就是定位的层积关系，稍不注意可能就制作不出你想要的效果。其次，便是小花的制作，多次运用到了旋转，旋转的角度及定位这里需要点耐心。 

代码分享：

HTML：

<div class="bear"><div class="circle"><span></span></div><div class="flHeart"></div><div class="flower"><span class="fl01"></span><span class="fl02"></span><span class="fl03"></span><span class="fl04"></span><span class="fl05"></span><span class="fl06"></span><span class="fl07"></span><span class="fl08"></span><span class="fl09"></span><span class="fl10"></span><span class="fl11"></span><span class="fl12"></span></div><div class="top"><div class="earL"></div><div class="earR"></div></div><div class="head"><div class="eyeL"></div><div class="eyeR"></div><div class="mooth"><span></span></div></div><div class="main"></div><div class="arm"></div><div class="foot"></div>
</div>

CSS：

 body { margin:0; }.bear { float:left; margin:0 20px 0 100px; }.circle { overflow:hidden; width:20px; height:180px; position:relative; top:115px; left:130px; z-index:2;-moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); }.circle span { display:block; width:200px; height:200px; border:6px solid #333; border-radius:100px;}.flHeart { width:30px; height:30px; background:#fa0; position:relative; top:-10px; left:165px; z-index:4; border-radius:30px; box-shadow:0 0 1px #ffc601; }.flower { width:30px; height:30px; background:#fa0; position:relative; top:-40px; left:165px; z-index:3; border-radius:30px; box-shadow:0 0 1px #ffc601; }.flower span { display:block; width:15px; height:25px; background:#09b709; position:absolute; z-index:-1; border-radius:15px/25px;}.fl01 { top:-15px; left:24px;-moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg);  box-shadow:1px 1px 0 #caf183; }.fl02 { top:-3px; left:32px;-moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); }.fl03 { top:8px; left:34px;-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); }.fl04 { top:18px; left:29px;-moz-transform:rotate(120deg); -webkit-transform:rotate(120deg); -o-transform:rotate(120deg); transform:rotate(120deg); }.fl05 { top:25px; left:18px;-moz-transform:rotate(150deg); -webkit-transform:rotate(150deg); -o-transform:rotate(150deg); transform:rotate(150deg); }.fl06 { top:27px; left:4px;-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); }.fl07 { top:24px; left:-8px;-moz-transform:rotate(210deg); -webkit-transform:rotate(210deg); -o-transform:rotate(210deg); transform:rotate(210deg); }.fl08 { top:16px; left:-16px;-moz-transform:rotate(240deg); -webkit-transform:rotate(240deg); -o-transform:rotate(240deg); transform:rotate(240deg); }.fl09 { top:3px; left:-18px;-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); -o-transform:rotate(270deg); transform:rotate(270deg); }.fl10 { top:-10px; left:-15px;-moz-transform:rotate(300deg); -webkit-transform:rotate(300deg); -o-transform:rotate(300deg); transform:rotate(300deg); }.fl11 { top:-19px; left:-5px;-moz-transform:rotate(330deg); -webkit-transform:rotate(330deg); -o-transform:rotate(330deg); transform:rotate(330deg); }.fl12 { top:-20px; left:10px;-moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }.top { position:relative; }.earL,.earR { width:34px; height:34px; border:6px solid #333; background:#f8f8f8; position:absolute; top:-5px; z-index:-1; border-radius:34px; }.earL { left:-5px; }.earR { left:115px; }.head { width:140px; height:100px; border:8px solid #333; background:#f8f8f8; position:relative; z-index:5; border-radius:140px/100px; }.eyeL,.eyeR { width:28px; height:28px; background:#f00; position:absolute; top:25px; border-radius:28px;  }.eyeL { left:30px; }.eyeR { right:30px; }.mooth { overflow:hidden; width:60px; height:20px; margin-left:-30px; position:absolute; top:63px; left:50%; }.mooth span { display:block; width:75px; height:55px; border:6px solid #333; margin:-50px 0 0 -15px; background:#f8f8f8; border-radius:60px/40px; }.main { width:90px; height:160px; border:8px solid #333; margin:-70px 0 0 25px; background:#f8f8f8; position:relative; z-index:3; border-radius:90px/160px; }.arm { width:128px; height:80px; border:8px solid #333; background:#f8f8f8; position:relative; top:-124px; left:6px; z-index:2; border-radius:128px/80px; }.foot { width:130px; height:16px; border:8px solid #333; margin:-125px 0 0 6px; background:#f8f8f8; position:relative; z-index:1; border-radius:50px 50px 0 0; }.small { float:left; width:;}

转载于:.html