用HTML5+CSS3畫一個簡易的機器貓頭像

原圖如下：

代碼實作效果如下：

代碼如下：

CSS樣式：

.cat:hover {

    transform: scale(1.5);

    transition: all 1s;

}

.cat {

    position: relative;

    z-index: 1;

}

.faceblue {

    width: 372px;

    height: 372px;

    border-radius: 50%;

    border: #3f4243 2px solid;

    margin: 0 auto;

    background-color: #07beea;

    position: relative;

}

.facewhite {

    width: 250px;

    height: 250px;

    border: #598680 solid 2px;

    border-radius: 50%;

    background-color: #fff;

    position: absolute;

    bottom: 35px;

    left: 16%;

    /* position: relative; */

}

.eyeleft,
.eyeright {

    width: 68px;

    height: 37px;

    border: #3f4243 2px solid;

    background-color: #fff;

    position: relative;

    left: 50px;

    top: 6px;

    float: left;

}

.eyeright {

    left: 60px;

}

.dotleft,
.dotright {

    background-color: #000;

    width: 23px;

    height: 23px;

    border-radius: 50%;

    position: absolute;

    left: 28px;

    top: 6px;

}

.dotright {

    left: auto;

    right: 28px;

}

.nose {

    width: 50px;

    height: 50px;

    background-image: radial-gradient(#fff 1%, #f00, #f00);

    border-radius: 50%;

    border: #3f4243 1px solid;

    position: absolute;

    left: 102px;

    top: 50px;

}

.line {

    height: 100px;

    width: 2px;

    background-color: #3f4243;

    position: absolute;

    left: 127px;

    top: 102px;

}

.smile {

    width: 163px;

    height: 128px;

    border: #3f4243 3px solid;

    border-radius: 50%;

    border-top: none;

    border-right: none;

    border-left: none;

    position: absolute;

    left: 44px;

    top: 74px;

}

.beard {

    position: relative;

    top: 75px;

    left: 5px;

}

.beard>div {

    margin-bottom: 15px;

    position: relative;

    z-index: 1;

}

.beard1,
.beard2,
.beard3 {

    width: 88px;

    height: 1px;

    background-color: #000;

}

.beard1,
.last .beard1 {

    transform: rotate(16deg);

    margin-left: 8px;

    width: 80px;

}

.beard3,
.last .beard3 {

    transform: rotate(164deg);

    width: 88px;

    /* margin-left: 8px; */

}

.last {

    position: relative;

    top: 22px;

    left: -1px;

    transform: rotate(180deg);

}

.last .beard3 {

    width: 80px;

    margin-left: 8px;

}

.last .beard1 {

    width: 88px;

    margin-left: 2px;

}      

 HTML結構：

<div class="cat">
    <div class="faceblue">
        <div class="facewhite">
            <!-- 眼睛 -->
            <div class="eyeleft">
                <div class="dotleft"></div>
            </div>
            <div class="eyeright">
                <div class="dotright"></div>
            </div>
            <!-- 鼻子 -->
                <div class="nose"></div>
                <div class="line"></div>
                <div class="smile"></div>
            <!-- 胡須 -->
            <div class="beard">
                <div class="beard1"></div>
                <div class="beard2"></div>
                <div class="beard3"></div>
            </div>
            <div class="beard last">
                <div class="beard1"></div>
                <div class="beard2"></div>
                <div class="beard3"></div>
            </div>
        </div>
    </div>
</div>