超可愛 純CSS3實現的小豬 小老鼠 小牛

2021-09-06 15:17:41 字數 4945 閱讀 3544

利用純css3繪製一些人物、動物、風景已經不是一件新鮮的事情了,主要是利用css3可以讓直線變成任意的曲線,於是簡單的向量圖形繪製對css3來說就小菜一碟了。今天要分享一下超級可愛的純css3實現的小豬、小老鼠、小牛,先看靚照:

我們可以在這裡檢視這三個小動物的demo演示。

接下來我們逐個來貼出實現這三個小動物的css**

一、小豬

html**:

<

div

id="pig"

>

<

div

id="pig_head"

>

div>

<

div

id="pig_ear_left"

>

div>

<

div

id="pig_ear_right"

>

div>

<

div

id="pig_eye_left"

>

div>

<

div

id="pig_eye_right"

>

div>

<

div

id="pig_snout"

>

div>

<

div

id="pig_snout_hole_left"

>

div>

<

div

id="pig_snout_hole_right"

>

div>

div>

css**:

#pig#pig_head #pig_ear_left #pig_ear_right #pig_eye_left #pig_eye_right #pig_snout #pig_snout_hole_left #pig_snout_hole_right
二、小老鼠

html**:

<

div

id="mouse"

>

<

div

id="mouse_head"

>

div>

<

div

id="mouse_ear_left"

>

div>

<

div

id="mouse_ear_right"

>

div>

<

div

id="mouse_eye_left_outer"

>

div>

<

div

id="mouse_eye_right_outer"

>

div>

<

div

id="mouse_eye_left_inner"

>

div>

<

div

id="mouse_eye_right_inner"

>

div>

<

div

id="mouse_nose"

>

div>

<

div

id="mouse_whisker_left_1"

>

div>

<

div

id="mouse_whisker_left_2"

>

div>

<

div

id="mouse_whisker_left_3"

>

div>

<

div

id="mouse_whisker_right_1"

>

div>

<

div

id="mouse_whisker_right_2"

>

div>

<

div

id="mouse_whisker_right_3"

>

div>

<

div

id="mouse_tooth_left"

>

div>

<

div

id="mouse_tooth_right"

>

div>

div>

css**:

#mouse#mouse_head #mouse_ear_left #mouse_ear_right #mouse_eye_left_outer #mouse_eye_right_outer #mouse_eye_left_inner #mouse_eye_right_inner #mouse_nose #mouse_whisker_left_1 #mouse_whisker_left_2 #mouse_whisker_left_3 #mouse_whisker_right_1 #mouse_whisker_right_2 #mouse_whisker_right_3 #mouse_tooth_left #mouse_tooth_right
三、小牛

html**:

<

div

id="cow"

>

<

div

id="cow_head"

>

div>

<

div

id="cow_horn_left"

>

div>

<

div

id="cow_horn_right"

>

div>

<

div

id="cow_eye_left_outer"

>

div>

<

div

id="cow_eye_right_outer"

>

div>

<

div

id="cow_eye_left_inner"

>

div>

<

div

id="cow_eye_right_inner"

>

div>

<

div

id="cow_snout"

>

div>

<

div

id="cow_snout_hole_left"

>

div>

<

div

id="cow_snout_hole_right"

>

div>

<

div

id="cow_mouth"

>

div>

<

div

id="cow_grass_1"

>

div>

<

div

id="cow_grass_2"

>

div>

<

div

id="cow_grass_3"

>

div>

<

div

id="cow_grass_4"

>

div>

<

div

id="cow_grass_5"

>

div>

<

div

id="cow_grass_6"

>

div>

<

div

id="cow_grass_7"

>

div>

<

div

id="cow_grass_8"

>

div>

<

div

id="cow_grass_9"

>

div>

<

div

id="cow_spot_1"

>

div>

<

div

id="cow_spot_2"

>

div>

<

div

id="cow_spot_3"

>

div>

<

div

id="cow_spot_4"

>

div>

<

div

id="cow_spot_5"

>

div>

<

div

id="cow_spot_6"

>

div>

div>

css**:

#cow #cow_head #cow_snout #cow_snout_hole_left #cow_snout_hole_right #cow_horn_left #cow_horn_right #cow_eye_left_outer #cow_eye_right_outer #cow_eye_left_inner #cow_eye_right_inner #cow_mouth #cow_grass_1 #cow_grass_2 #cow_grass_3 #cow_grass_4 #cow_grass_5 #cow_grass_6 #cow_grass_7 #cow_grass_8 #cow_grass_9 #cow_spot_1 #cow_spot_2 #cow_spot_3 #cow_spot_4 #cow_spot_5 #cow_spot_6

超可愛 純CSS3實現的小豬 小老鼠 小牛

利用純 css3 繪製一些人物 動物 風景已經不是一件新鮮的事情了,主要是利用css3可以讓直線變成任意的曲線,於是簡單的向量圖形繪製對css3來說就小菜一碟了。今天要分享一下超級可愛的純css3實現的小豬 小老鼠 小牛,先看靚照 我們可以在這裡檢視這三個小動物的demo演示。接下來我們逐個來貼出實...

超可愛 純CSS3實現的小豬 小老鼠 小牛

利用純css3繪製一些人物 動物 風景已經不是一件新鮮的事情了,主要是利用css3可以讓直線變成任意的曲線,於是簡單的向量圖形繪製對css3來說就小菜一碟了。今天要分享一下超級可愛的純css3實現的小豬 小老鼠 小牛,先看靚照 我們可以在這裡檢視這三個小動物的demo演示。接下來我們逐個來貼出實現這...

純CSS3實現的標籤效果

1.效果分析 純css3實現的標籤效果,如圖1所示,看看demo。該標籤主要有三個部分組成,左側的三角形 右側的圓角矩形和文字前面的小圓點。重點在左側三角形和文字前面圓點的實現。2.技術難點 三角形利用寬和高為零的元素的邊框實現。將邊框設定為12px solid transparent,然後將右側邊...