使用 css 程式碼畫一隻玉兔,迎中秋佳節

語言: CN / TW / HK

前言:中秋佳節,大家都在討論月餅啊、嫦娥啊,但我們怎麼能忘了可愛的玉兔呢。今天我們就來用 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 向元素應用 2D3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

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

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

結語

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

作者:CatWatermelon 來源:稀土掘金

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

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