超能陸戰隊之大白製作過程

2021-10-08 05:57:00 字數 1378 閱讀 9884

效果圖如下:

是不是有點心動呢?接下來請看具體步驟:

首先先把html部分先寫完,做出整體的結構:

為了是效果更加明顯,我們把最外面的盒子背景設為灰色,並且讓整個盒子居中:

body

.baymax

如圖:這一步就不如圖了吧。。

然後再寫具體的css樣式,先寫頭部樣式:

.head

.eye, .eye2

.eye2

.mouth

看圖:

我們已經實現了乙個頭部,是不是有點樣子了呢,哈哈,我們繼續

接下來是它的乙個軀幹和腹部:

.torso,.belly

.belly

.cover

就會是這樣乙個效果:

是不是還得來一顆小心臟呢?安排

.heart

.heart::before,.heart::after

.heart::after

.heart::before

心臟也出來啦!

然後就該做手臂了

.left_arm,.right_arm

.right_arm

.l_bigfinger,.r_bigfinger

.r_bigfinger

.l_smallfinger,.r_smallfinger

.r_smallfinger

小爪子也出來啦!!

那最後一步就是它的leg了~~

好了,乙隻完整的大白已經站在你面前了!

如果想讓它眨眼睛的話,可以這樣

@keyframes blink

}//回到眼睛樣式

.eye, .eye2

今天的分享會就到這兒了,拜拜~~

純css打造超能陸戰隊 大白

要點 思路 要把大白分割,整體baymax中包含header eye1,eye2,mouth torso heart belly cover l bigfinger,r bigfinger,l smallfinger,r smallfinger,l leg,r leg。效果圖 因為大白是白色,所以背...