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更能夠加快網站的響應