<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS3绘制的苹果 Logo - by 前端开发网(W3Cfuns)</title>
<style>
#apple .canvas,.apple6,.apple7,.apple8,.apple61 {
background: #f2f2f2;
}
#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;
-o-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
-ms-transform:rotate(-25deg);
-webkit-transform:rotate(-25deg);
transform:rotate(-25deg);
top:98px;
width: 64px;
}
.apple4 {
border-radius:64px 22px 64px 64px/106px 106px 106px 106px;
left:103px;
-o-transform:rotate(25deg);
-moz-transform:rotate(25deg);
-ms-transform:rotate(25deg);
-webkit-transform:rotate(25deg);
transform:rotate(25deg);
}
.apple5 {
height: 145px;
left:54px;
top:53px;
width:70px;
}
.apple6 {
left:50px;
-o-transform:scaley(0.5);
-moz-transform:scaley(0.5);
-ms-transform:scaley(0.5);
-webkit-transform:scaley(0.5);
transform:scaley(0.5);
top:14px;
}
.apple61 {
border-radius:20px;
height: 80px;
-o-transform: rotate(-45deg) scale(0.9);
-moz-transform: rotate(-45deg) scale(0.9);
-ms-transform: rotate(-45deg) scale(0.9);
-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 *,.apple9:before,.apple9:after {
background: #62bb47;
}
#apple .slice2 * {
background: #fcb827;
}
#apple .slice3 * {
background: #f6821f;
}
#apple .slice4 * {
background: #e03a3e;
}
#apple .slice5 * {
background: #963d97;
}
#apple .slice6 * {
background: #009ddc;
}
#apple .slice1 {
clip:rect(0 180px 73px 0px);
}
#apple .slice2 {
clip:rect(73px 180px 98px 0px);
}
#apple .slice3 {
clip:rect(98px 180px 123px 0px);
}
#apple .slice4 {
clip:rect(123px 180px 148px 0px);
}
#apple .slice5 {
clip:rect(148px 180px 174px 0px);
}
#apple .slice6 {
clip:rect(174px 180px 205px 0px);
}
.apple9 {
left:122px;
top:-18px;
-o-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.apple9:before,.apple9:after {
border-radius:50%;
content:"#";
display: block;
height: 90px;
position: absolute;
text-indent: -9999px;
width:90px;
}
.apple9:before {
clip:rect(0 13px 80px 0px);
}
.apple9:after {
clip:rect(14px 100px 76px 76px);
left:-64px;
}
#apple .header h2 {
text-indent:200px;
}
/* general styles */
.canvas {
display: block;
overflow: hidden;
position: relative;
top: 0px;
text-indent:-9999px;
z-index: 10;
}
.icon, .icon * {
display: block;
position: absolute;
}
.monitor,
.monitor .canvas {
height: 304px;
width:540px;
}
.monitor {
background: #000;
border:30px solid #000;
border-radius:20px;
float:left;
position:relative;
}
.monitor:before { /* shadow */
box-shadow: 0 360px 10px rgba(0,0,0,0.2);
border-radius:50%;
content: "#";
display: block;
height: 20px;
left: 30px;
position: absolute;
text-indent: -9999px;
width: 540px;
}
.monitor:after { /* shine */
background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);
border-radius:20px 20px 0 0;
height: 364px;
content: "#";
display: block;
position: absolute;
right: -30px;
text-indent: -9999px;
top:-30px;
width:600px;
z-index: 10;
}
</style>
</head>
<body>
<div id="apple">
<div class="monitor">
<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>
<div class="slice2 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice3 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice4 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice5 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice6 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<div class="slice">
<div class="apple6"><div class="apple61"></div></div>
<div class="apple7"></div>
<div class="apple8">
</div>
<div class="apple9"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>