CSS 绘制 Apple 标志

HTML:

<body class="bacc-black">
<div class="apple-container pos-r m-hoz-auto">
<div class="apple-leaf pos-a m-hoz-auto bacc-white"></div>
<div class="apple-body-top pos-r m-hoz-auto">
<div class="apple-body-top-left oh pos-r pull-left">
<div class="apple-body-top-left-inside bacc-white"></div>
</div>
<div class="apple-body-top-right oh pos-r pull-left">
<div class="apple-body-top-right-inside bacc-white"></div>
</div>
<div class="apple-body-top-center oh pos-a pull-left">
<div class="apple-body-top-center-inside bacc-black"></div>
</div>
</div>
<div class="apple-body pos-r oh m-hoz-auto">
<div class="apple-body-inside pull-left bacc-white"></div>
<div class="apple-ate pos-a pull-left bacc-black"></div>
</div>
<div class="apple-body-bottom pos-r m-hoz-auto">
<div class="apple-body-bottom-left oh pos-r pull-left">
<div class="apple-body-bottom-left-inside bacc-white"></div>
</div>
<div class="apple-body-bottom-right oh pos-r pull-left">
<div class="apple-body-bottom-right-inside bacc-white"></div>
</div> 
<div class="apple-body-bottom-center oh pos-a pull-left">
<div class="apple-body-bottom-center-inside bacc-black"></div>
</div>
</div> 
</div>
</body>

CSS:

/*位置选择器*/
.clearfix {
clear: both;
}

.pos-a {
position: absolute;
}

.pos-r {
position: relative;
}

.pull-left {
float: left;
}

.pull-right {
float: right;
}

.m-hoz-auto {
margin-left: auto;
margin-right: auto;
}

.left-32 {
left: 32px;
}

.left-5 {
left: 5px;
}

.top-30 {
top: 30px;
}

/*形状选择器*/
.circle {
border-radius: 50%;
}


/*样式选择器*/
.bacc-white {
background-color: white;
}

.bacc-black {
background-color: black;
}

.bacc-blue {
background-color: rgb(2, 159, 227);
}

.bacc-brown-red {
background-color: rgb(216, 5, 23);
}

.bacc-mouse-red {
background-color: #E80115;
}

.bacc-mouse-orange {
background-color: #EF6C1C;
}

.bacc-bell-yellow {
background-color: #F5D600;
}

.border-black-1 {
border: 1px solid black;
}

.border-black-2 {
border: 2px solid black;
}

.border-black-3 {
border: 3px solid black;
}

.oh {
overflow: hidden;
}
.apple-container {
height: 600px;
margin-top: 100px;
margin-bottom: 100px;
width: 600px;
}

.apple-leaf {
border-top-left-radius: 100%;
border-bottom-right-radius: 100%;
height: 55px;
left: 49%;
top: -43px;
width: 45px;
z-index: 6;
}

.apple-body-top {
height: 15px;
width: 130px;
}

.apple-body-top-left {
height: 15px;
width: 65px;
z-index: 4;
}

.apple-body-top-left-inside {
border-radius: 50%;
height: 75px;
margin-top: 8px;
margin-left: -17px;
width: 82px;
}

.apple-body-top-right {
height: 15px;
width: 65px;
z-index: 4;
}

.apple-body-top-right-inside {
border-radius: 50%;
height: 75px;
margin-top: 8px;
margin-left: 1px;
width: 82px;
}

.apple-body-top-center {
height: 15px;
left: 20px;
top: 4px;
width: 85px;
z-index: 5;
}

.apple-body-top-center-inside {
border-radius: 50%;
height: 95px;
margin-left: 1px;
margin-top: -80px;
width: 87px;
z-index: 5;
}

.apple-body {
height: 150px;
width: 200px;
z-index: 3;
}

.apple-body-inside {
border-top-left-radius: 60px 70px;
border-top-right-radius: 60px 70px;
border-bottom-left-radius: 100px 115px;
border-bottom-right-radius: 100px 115px;
height: 175px;
margin-top: -5px;
width: 200px;
z-index: 3;
}

.apple-ate {
border-radius: 50%;
height: 95px;
margin-left: 160px;
margin-top: 8px;
width: 95px;
}

.apple-body-bottom {
height: 15px;
width: 130px;
}

.apple-body-bottom-left {
height: 15px;
width: 65px;
z-index: 4;
}

.apple-body-bottom-left-inside {
border-radius: 50%;
height: 75px;
margin-top: -66px;
margin-left: -7px;
width: 70px;
}

.apple-body-bottom-right {
height: 15px;
width: 65px;
z-index: 4;
}

.apple-body-bottom-right-inside {
border-radius: 50%;
height: 75px;
margin-top: -66px;
margin-left: 2px;
width: 70px;
}

.apple-body-bottom-center {
height: 15px;
left: 28px;
top: -3px;
width: 70px;
z-index: 5;
}

.apple-body-bottom-center-inside {
border-radius: 50%;
height: 95px;
margin-left: -6px;
width: 87px;
}

在线实例：

温馨提示 : 非特殊注明，否则均为李联华的博客原创文章，本站文章未经授权禁止任何形式转载
文章链接：https://www.ooize.com/draw-apple-logo-with-css.html

二维码