CSS3是一種用于網(wǎng)頁設(shè)計的語言,可以幫助設(shè)計師實(shí)現(xiàn)一些有趣的效果,比如用CSS3畫出各種動物形狀。
首先,我們需要使用HTML來創(chuàng)建一個DIV,然后將其設(shè)置為需要繪制動物的大小和形狀。接著,我們使用CSS3來設(shè)置背景色以及各種形狀和陰影。
<div class="animal"></div>
.animal {
width: 150px;
height: 150px;
background: #8BC34A;
border-radius: 50%;
position: relative;
}
.animal::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 20px 0 0 #fff, -20px 0 0 #fff;
}
上述代碼將創(chuàng)建一個綠色背景的圓形DIV,用偽元素::before添加白色橢圓形狀表達(dá)眼睛,并通過box-shadow添加眼眶。
.animal::after {
content: '';
position: absolute;
width: 50px;
height: 25px;
border-radius: 50%;
background: #fff;
top: 65px;
left: 50%;
transform: translateX(-50%);
box-shadow: 3px 3px 0 #BDBDBD, -3px 3px 0 #BDBDBD, -8px 0 0 #BDBDBD;
}
接下來,我們使用偽元素::after添加一個白色的小圓形表示動物的鼻子,用box-shadow添加陰影,增加逼真程度。
最后,我們通過CSS3添加其他元素,表現(xiàn)出動物更加完整的形態(tài)。
.animal >div {
position: absolute;
border-radius: 50%;
background: #fff;
}
.animal >div:nth-child(1) {
width: 20px;
height: 20px;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.animal >div:nth-child(2) {
width: 60px;
height: 8px;
top: 90px;
left: 50%;
transform: translateX(-50%);
}
上述代碼通過創(chuàng)建div元素表示動物的其他組成部分,如耳朵和嘴巴,然后通過CSS3實(shí)現(xiàn)更豐富的表現(xiàn)力。
總的來說,CSS3提供了豐富的諸如背景、邊框等功能,我們可以通過它創(chuàng)建出非常具有表達(dá)力的動物形狀。當(dāng)然,這只是CSS3用法的冰山一角,在實(shí)際應(yīng)用中,我們可以創(chuàng)造出更多更有趣的效果。