<!
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
>