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更能够加快网站的响应