css實現乙個冰墩墩

2022-09-20 19:18:09 字數 2510 閱讀 3695

一墩難求,花了一兩個小時自己畫了乙個,html結構很簡單,css上主要就是將各個位置定位,肚子上的logo就只有發揮啦

以下是html**

<

div

class

="container"

>

<

div

class

="m_body"

>

div>

<

div

class

="ear_l"

>

div>

<

div

class

="ear_r"

>

div>

<

div

class

="arm_l"

>

div>

<

div

class

="arm_r"

>

div>

<

div

class

="face f_green"

>

div>

<

div

class

="face f_yelow"

>

div>

<

div

class

="face f_blue"

>

div>

<

div

class

="face f_purple"

>

div>

<

div

class

="face f_shy_blue"

>

div>

<

div

class

="eye_l"

>

div>

<

div

class

="eye_r"

>

div>

<

div

class

="nose"

>

div>

<

div

class

="mouth"

>

div>

<

div

class

="logo"

>

<

img

src="./img/logo_d.png"

alt=""

>

div>

<

div

class

="leg_l"

>

div>

<

div

class

="leg_r"

>

div>

div>

以下是css樣式

body 

.container

.m_body

.ear_l,.ear_r

.ear_l

.ear_r

.arm_l,.arm_r

.arm_l

.arm_r

.arm_r:before,.arm_r:after

.arm_r:before

.arm_r:after

.face

.f_green

.f_yelow

.f_blue

.f_purple

.f_shy_blue

.eye_l,.eye_r

.eye_l:before,.eye_r:before

.eye_l:after,.eye_r:after

.eye_l:after

.eye_r:after

.eye_l:before

.eye_r:before

.eye_l

.eye_r

.nose

.nose, .nose:before,.nose:after

.mouth

.mouth::before

.mouth:after

.logo

.logo img

.leg_l,.leg_r

.leg_l

.leg_r

.leg_l:after,

.leg_r:after

.leg_l:after

.leg_r:after

效果展示

CSS簡單實現乙個箭頭

如題,用簡單幾行css 實現乙個箭頭。其實有很多不同的方法可以實現,比如旋轉乙個有背景顏色的div,再把多餘的部門覆蓋掉等等。在這裡記錄一下不同思路。css divhtml 就乙個div 效果圖 解析 關鍵在於對邊框的理解。首先給出乙個div,四周加上邊框,再放大邊框看一看效果 很明顯了,把邊框設定...

純CSS實現乙個氣泡框

實現原理 主要通過css的border color屬性,結合 before after和position absolute實現。1 畫乙個正方形或長方形的盒子,別忘記此盒子需加上position relative,不然之後的絕對定位元素會相對於其餘設了position relative的父級元素或w...

css左側投影 CSS實現的乙個簡單時尚的左側導航

簡單的左側導航 如下 複製 如下 測試 使用者管理 基本資料 郵箱管理 密碼管理 編輯管理 發布廣告管理 wmenu dl dt click function 預設字型 body,button,input,select,textarea h1,h2,h3,h4,h5,h6 address,cite,...