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:;}