效果圖如下:
是不是有點心動呢?接下來請看具體步驟:
首先先把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。效果圖 因為大白是白色,所以背...