超可愛 純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，然後將右側邊...