CSS3-使用纯css绘制天猫logo

本文主要记录如何使用纯css绘制出一个天猫logo，即那只黑色的猫。在编写代码之前，注意一些有用的小tips:

当含有定位属性函数，top\bottom的单位为百分比时，该百分比是相对于父级高度height计算。而left/right则是根据父级的width进行计算

border-width绝对不能使用百分比来表示

当父容器里有绝对定位子元素时，子元素设置width:100%实际上是指相对于父级容器padding+content的宽度

网页初始化时，font-size默认为16px。在单独不设置font-size的前提下，1em=16px

html代码如下所示：

<div class="wrap">
<div class="ear">
<span class="earl"></span>
<span class="earr"></span>
<span class="earm"></span>
</div>
<div class="face">
<div class="eyel"></div>
<div class="eyer"></div>
<div class="mouthl"></div>
<div class="mouthr"></div>
</div>

<div class="bodytop"></div>
<div class="bodybottom"></div>

css代码如下所示：

.wrap {
width: 400px;
height: 500px;
}

.ear {
width: 100%;
height: 15%;
position: relative;
}

.earl {
width: 18%;
height: 100%;
position: relative;
display: inline-block;
vertical-align:middle;
border-top-left-radius: 20% 30%;
border-top-right-radius: 80% 100%;
background: black;
z-index: 0;
}

.earl:after {
content: "";
width: 450%;
height: 72%;
position: absolute;
left: 84%;
bottom: 0;
background: black;
}

.earr {
width: 18%;
height: 100%;
position: absolute;
display: inline-block;
vertical-align:middle;
right: 0;
border-top-right-radius: 20% 30%;
border-top-left-radius: 80% 100%;
background: black;
z-index: 0;
}

.earm {
width: 76%;
height: 100%;
position: absolute;
display: inline-block;
vertical-align:middle;
left: 12%;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
z-index: 1;
background: #fff;
border-bottom: none;
}

.face {
width: 100%;
height: 25%;
position: relative;
background: black;
border-bottom-left-radius: 10% 10%;
border-bottom-right-radius: 10% 10%;
}

.eyel {
width: 20%;
height: 80%;
position: absolute;
left: 15%;
border-radius: 100%;
background: #fff;
z-index: 1;
}

.eyer {
width: 20%;
height: 80%;
position: absolute;
right: 15%;
border-radius: 100%;
background: #fff;
z-index: 1;
}

.eyel:after {
content: "";
width: 20%;
height: 100%;
position: absolute;
left: 40%;
border-radius: 100%;
background: black;
z-index: 1;
}

.eyer:after {
content: "";
width: 20%;
height: 100%;
position: absolute;
left: 40%;
border-radius: 100%;
background: black;
z-index: 1;
}

.face:after {
content: "";
position: absolute;
border-top: 1em solid white;
border-bottom: 1em solid transparent;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
left: 45.9%;
bottom: 30%;
}

.mouthl {
width: 10%;
height: 25.6%;
position: absolute;
left: 40%;
top: 50%;
border-radius: 100%;
border-bottom: 0.4em solid white;
z-index: 1;
}

.mouthr {
width: 10%;
height: 25.6%;
position: absolute;
right: 40%;
top: 50%;
border-radius: 100%;
border-bottom: 0.4em solid white;
z-index: 1;
}

.bodytop {
position: relative;
width: 20%;
height: 25%;
background: black;
left: 40%;
}

.bodybottom {
position: relative;
width: 20%;
height: 25%;
background: black;
left: 40%;
}

.bodytop:before {
content: "";
position: absolute;
right: 42%;
bottom:18.4%;
width: 50%;
border-top: 0 solid transparent;
border-bottom: 1.5em solid black;
border-left: 6em solid transparent;
border-right: 0 solid transparent;
transform: rotate(-20deg);
}

.bodytop:after {
content: "";
position: absolute;
left: 42%;
bottom:18.4%;
width: 50%;
border-top: none;
border-bottom: 1.5em solid black;
border-right: 6em solid transparent;
border-left: none;
transform: rotate(20deg);
}

.bodybottom:before {
position: absolute;
left: 0;
top: 100%;
width: 50%;
content: "";
border-top: none;
border-bottom: 4em solid transparent;
border-left: 1em solid black;
border-right: none;
}

.bodybottom:after {
position: absolute;
right: 0;
top: 100%;
width: 50%;
content: "";
border-top: none;
border-bottom: 4em solid transparent;
border-right: 1em solid black;
border-left: none;
}

虽然这个只是能够作为天猫logo，但主要是可以锻炼下样式使用能力。而且纯css所绘制的图片会比img更能够加快网站的响应