使用 css 代碼畫一隻玉兔，迎中秋佳節

前言：中秋佳節，大家都在討論月餅啊、嫦娥啊，但我們怎麼能忘了可愛的玉兔呢。今天我們就來用 css 畫一隻玉兔出來。

演示：

代碼

HTML代表

    <div class="container">
        <div class="rabbit">
            <div class="head">
                <div class="left-ear ear"></div>
                <div class="right-ear ear"></div>
                <div class="left-eye eye"></div>
                <div class="right-eye eye"></div>
                <div class="nose"></div>
            </div>
            <div class="body">
                <div class="left-hand hand"></div>
                <div class="right-hand hand"></div>
                <div class="left-leg hand"></div>
                <div class="right-leg hand"></div>
                <div class="tail"></div>
            </div>
        </div>
    </div>

CSS代碼

body {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.rabbit {
position: relative;
}
.head {
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #000;
z-index: 333;
}
.ear {
position: absolute;
border: 1px solid #000;
border-bottom: none;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: skewX(20deg);
background-color: #fff;
width: 12px;
top: -40px;
}
.ear::after {
content: '';
width: 6px;
width: 50%;
height: 84%;
border-radius: 10px;
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
top: 5px;
background-color: pink;
}
.left-ear {
left:-4px;
height: 50px;
transform: skewX(20deg);
}
.right-ear {
right:14px;
height: 45px;
transform: skewX(10deg);
}
.eye {
position: absolute;
top: 32%;
width: 8px;
height: 10px;
border-radius: 50%;
transform: skewX(4deg);
background-color: rgba(0, 0, 0, 0.896);
}
.eye::after {
position: absolute;
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
transform: skewX(4deg);
background-color: #fff;
}
.left-eye {
left: 14px;
}
.right-eye {
right: 6px;
}
.nose {
position: absolute;
bottom: 10px;
left: 60%;
transform: translateX(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.325);
}
.body {
border: 1px solid #000;
width: 80px;
height: 60px;
border-radius: 46%;
position: absolute;
top: -0px;
left: -82px;
z-index: -3;
}
.hand {
position: absolute;
bottom: -10px;
height: 20px;
width: 10px;
border-radius: 40%;
border: 1px solid #000;
transform: skewX(10deg);
}
.right-hand {
transform: skewX(26deg);
right: 8px;
animation: leg 0.5s alternate infinite;
}
.left-hand {
right: 21px;
animation: leg 0.5s alternate infinite;
}

.right-leg {
left: 15px;
transform: skewX(-26deg);
animation: hand 0.5s alternate infinite;
}
.left-leg {
left: 26px;
transform: skewX(-10deg);
animation: hand 0.5s alternate infinite;
}
.tail {
position: absolute;
left: -10px;
top: 3px;
height: 14px;
width: 14px;
border-radius: 50%;
border: 1px solid #000;
}
@keyframes hand {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(60deg);
}
}
@keyframes leg {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-60deg);
}
}

涉及知識點

position

relative 相對定位是一個非常容易理解的概念，如果將一個元素設置為相對定位，可以設置其水平位置和垂直位置，這個元素相對於元素的起點開始移動。需要注意的一個地方是，相對定位的元素雖然位移了，但是原本位置的空間 仍是被佔據的 。

absolute 絕對定位，絕對定位是相對於非 static 定位的元素來説的，如果沒有，則默認為 body 。工作中我們經常的使用 relative 給父元素，子元素設置為 absolute 來設置子元素的位置。

偽元素 ::after

用來向選中的元素後插入一個內容，通常配合 content 屬性使用，來指定要插入的內容。

transform 變換

transform 向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

rotate ：用來將元素旋轉給定的角度。可以按照度數、刻度、弧度或轉角設置角度。本文使用角度設置，單位為 deg 。

transform ：本文中使用到了 skewX 傾斜， translateX 沿 x 軸移動。使用絕對定位搭配 translateX 還可以實現未知寬度的橫向居中。 skewX 向 x 軸傾斜一定的角度。

結語

代碼雖然簡單，但也是學以致用的一種體現，多結合不同的技巧，可以更好的幫助我們理解。

作者：CatWatermelon 來源：稀土掘金

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com

交流：為設計新人提供的設計交流羣，請加入UI設計交流羣，分享經驗、接單、求職、聊設計。