原創 純CSS畫黃金梅麗號!

2022-08-11 17:09:13 字數 2819 閱讀 3764

**如下

>**梅麗號

title

>

<

style

type

="text/css"

>

body

/*face

*/.face

/*eye

*/.eye-out

.eye

.left

.eye-in

.right

/*nose

*/.nose-out

.nose-down

.nose-left

.nose-right

.nose-bottom

.nose-bottom-left

.nose-bottom-right

/*horn

*/.horn

.horn-big

.horn-left

.horn-right

.horn-link

.hornbig-right

.horn2

.horn-link2

style

>

head

>

<

body

>

<

div

class

="container"

>

<

div

class

="face"

>

<

div

class

="eye-out"

>

<

div

class

="eye left"

>

<

div

class

="eye-in"

>

div>

div>

<

div

class

="eye right"

>

<

div

class

="eye-in"

>

div>

div>

div>

<

div

class

="nose-out"

>

<

div

class

="nose-left"

>

div>

<

div

class

="nose-right"

>

div>

<

div

class

="nose-bottom"

>

div>

div>

<

div

class

="nose-out nose-down"

>

<

div

class

="nose-bottom-left"

>

div>

<

div

class

="nose-bottom-right"

>

div>

div>

div>

<

div

class

="horn-left"

>

<

div

class

="horn-big"

>

<

div

class

="horn"

>

div>

div>

<

div

class

="horn-link"

>

div>

div>

<

div

class

="horn-right"

>

<

div

class

="horn-big hornbig-right"

>

<

div

class

="horn2"

>

div>

div>

<

div

class

="horn-link2"

>

div>

div>

div>

body

>

html

>

鬼畜梅利號用純css完成,主要有以下幾個點:

一.布局

①position:relative/absolute;

②display:flex;

③overflow: hidden;

二.特殊形狀

①border-radius

學到乙個如何畫

再結合一下transform等效果!

難度是真的不大,主要是練練手熟悉一下css屬性!

哈哈哈哈,越看越覺得搞笑

用純CSS畫大白

純css打造網頁大白知識點 首先要把大白分割,整體baymax中包含header eye1,eye2,mouth torso heart belly cover l bigfinger,r bigfinger,l smallfinger,r smallfinger,l leg,r leg。因為大白是...

css畫橫線箭頭 用純CSS實現的箭頭

用css即可繪製出各種箭頭,無需裁剪,甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單,通過擷取border 邊框 的部分 拐角 實現,幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時,改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...

css畫橫線箭頭 如何用純CSS實現的箭頭的效果?

如何用純css實現的箭頭的效果?要點 用css即可繪製出各種箭頭,無需裁剪,甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單,通過擷取border 邊框 的部分 拐角 實現,幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時,改變某一邊的顏色可以看到乙個梯形 de...