css3画苹果logo 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iphone logo</title>
<style type="text/css">

/*==============苹果==============*/
#apple .canvas,.apple6,.apple7,.apple8,.apple61 {
    background: #fff;
}

#apple .icon {
    left: 184px;
    height: 202px;
    top: 51px;
    width: 172px;
}

.apple1 {
    border-radius: 108px 108px 108px 94px/128px 128px 128px 128px;
    height: 128px;
    top: 47px;
    width: 108px;
}

.apple2 {
    left: 72px;
}

.apple3 {
    border-radius: 22px 64px 64px 64px/106px 106px 106px 106px;
    height: 106px;
    left: 12px;
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
    top: 98px;
    width: 64px;
}

.apple4 {
    border-radius: 64px 22px 64px 64px/106px 106px 106px 106px;
    left: 103px;
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}

.apple5 {
    height: 145px;
    left: 54px;
    top: 53px;
    width: 70px;
}

.apple6 {
    left: 50px;
    -webkit-transform: scaley(0.5);
    transform: scaley(0.5);
    top: 14px;
}

.apple61 {
    border-radius: 20px;
    height: 80px;
    -webkit-transform: rotate(-45deg) scale(0.9);
    transform: rotate(-45deg) scale(0.9);
    width: 80px;
}

.apple7 {
    border-radius: 50%;
    height: 22px;
    left: 66px;
    top: 192px;
    width: 47px;
}

.apple8 {
    border-radius: 50%;
    height: 85px;
    left: 144px;
    top: 63px;
    width: 85px;
}

#apple .slice {
    height: 200px;
    position: absolute;
    width: 180px;
}

#apple .slice * {
    position: absolute;
}

#apple .slice1 *{
    background:#333;
}

/*==========分解apple==========*/    

.apple9:before,.apple9:after {
    background: #333;
}
.apple9{
    left:122px;
    top:-18px;
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    }
.apple9:before,.apple9:after {
    border-radius:50%;
    content:".";
    display: block;
    height: 90px;
    position: absolute;
    width:90px;background: #333;
}
.apple9:before {
    clip:rect(0 13px 80px 0px);
}
.apple9:after {
    clip:rect(14px 100px 76px 76px);
    left:-64px;
}    
</style>
</head>

<body>

<div id="apple">
    <div class="canvas">        
        <div class="icon">
            <!--苹果[-->
            <div class="slice1 slice">
                <div class="apple1"></div>
                <div class="apple2 apple1"></div>
                <div class="apple3"></div>
                <div class="apple4 apple3"></div>
                <div class="apple5"></div>
            </div>
            <!--end 苹果-->
            
            <div class="slice">
            
                <!--苹果顶部凹下去部分-->
                <div class="apple6">
                    <div class="apple61"></div>
                </div>
                <!--end 苹果顶部凹下去部分-->
                
                <!--苹果底部凹下去部分-->
                <div class="apple7"></div>
                <!--苹果底部凹下去部分-->
                
                <!--被咬一口的部分-->
                <div class="apple8"></div>
                <!--end 被咬一口部分-->
                <!--顶部叶子部分-->
                <div class="apple9"></div>
                <!--end 顶部叶子部分-->
            </div>
        </div>
    </div>
</div>

</body>
</html>

抄袭了原版的，简化了原版的，合适菜鸟学习

 

原文：http://www.w3cfuns.com/thread-5592982-1-1.html

posted @ 2013-09-22 18:31  沉睡的泰坦尼克  阅读(744)  评论(0)  编辑  收藏  举报