純css打造超能陸戰隊 大白

2021-09-13 14:31:29 字數 771 閱讀 5153

要點 思路

要把大白分割,整體baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinger,r-bigfinger,l-smallfinger,r-smallfinger,l-leg,r-leg。

效果圖

因為大白是白色,所以背景顏色(body)要設為深色。

大白居中,div居中要用margin:0 auto;

保險起見overflow:hidden

總結head檔案的規範:

1.設定寬高之後以百分比定義圓角的形狀 border-radius:50%

2.margin-bottom設為負值,使身體與頭部有重疊

3.因為只有設定了position 為relative absolute fixed 後 ,設定z-index才生效。並且z-index是相對於同一父親元素的所有子元素的層級關係,z-index的值越大,說明他的位置越高。

所以給頭部設定position:relative,然後將層級z-index:100

其次寫eye1,eye2:

用到旋轉對稱使左右眼對稱,transform:rotate(**deg)與transform:rotate(-**deg)左右對稱,左右手臂,左右手指,左右腿都會用到。

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

效果圖如下 是不是有點心動呢?接下來請看具體步驟 首先先把html部分先寫完,做出整體的結構 為了是效果更加明顯,我們把最外面的盒子背景設為灰色,並且讓整個盒子居中 body baymax 如圖 這一步就不如圖了吧。然後再寫具體的css樣式,先寫頭部樣式 head eye,eye2 eye2 mou...

陸戰收奪 3 3 塞迪

陸戰收奪 在開 大陸之前,陸戰收奪,相對於傳統的海戰收奪,會有雞肋的感覺 一來是因為裝備的耐久損耗實在可以用驚人來形容,對於在陸戰掛過劍術的人來說,一晚上打暴幾把劍已不是什麼新鮮事了 二來是因為陸戰掉落物品實在是沒有太大的吸引力,那個時候對大多數人來說,最實用 最典型的陸戰收奪,就是收奪丁卡族山賊獲...

純CSS打造Flow Steps導航

幾個要點 1.三角箭頭效果是用border實現的,詳細的可以google下css 三角 2.ie6下不支援border color transparent 透明 解決方法是先將其設定為乙個不常用的顏色,然後再用ie的濾鏡將其透明化 demo中有注釋 3.每個step之間的白色間隙為了等距所以處理比較...