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;
}在线实例：
洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
蓝罐（Kjeldsens）曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
适用于新款车载手机支架无线器快充智能自动感应汽车
皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;IP地址：3.145.103.169，归属地:俄亥俄州Dublin ，欢迎您的访问!
文章链接：https://www.lilianhua.com/draw-apple-logo-with-css.html
文章链接：https://www.lilianhua.com/draw-apple-logo-with-css.html
