div+css画一个小猪佩奇

用DIV+CSS画一个小猪佩奇，挺可爱的，嘻嘻。

1、HTML部分：（全是DIV）

<!-- 小猪佩奇整体容器 -->
<div class="pig_container"><!-- 尾巴 --><div class="tail_left"></div><div class="tail_right"></div><div class="tail_blank"></div><div class="tail_middle"></div><div class="tail_circle"></div><!-- 左脚 --><div class="left_foot"></div><div class="left_foot right_foot"></div><!-- 左鞋 --><div class="left_shoes"></div><div class="left_shoes right_shoes"></div><!-- 左手 --><div><div class="hand_left_top"></div><div class="hand_left_bottom"></div><div class="hand_left_middle"></div></div><!-- 身体 --><div class="pig_body_bottom"></div><!-- 右手 --><div><div class="hand_right_top"></div><div class="hand_right_bottom"></div><div class="hand_right_middle"></div></div><!-- 猪头 --><div><!-- 耳朵 --><div class="ear_left"></div><div class="ear_right"></div><div class="pig_head"><div class="pig_head_white_left_bottom"></div></div><div class="pig_head_white_left_top"></div><!-- 鼻子 --><div class="pig_nose"></div><!-- 下巴 --><div class="pig_jaw"></div><div class="pig_jaw_right"></div><div class="pig_nose_bottom"></div><!-- 鼻孔 --><div class="nose_kong_left"></div><div class="nose_kong_right"></div><!-- 左眼 --><div class="left_eye"><div class="left_eye_bg"></div><div class="left_eye_ball"></div><div class="left_eye_border"></div></div><!-- 右眼 --><div class="right_eye"><div class="right_eye_bg"></div><div class="right_eye_ball"></div><div class="right_eye_border"></div></div><!-- 嘴巴 --><div class="mouth"><div class="mouth_bottom"></div><div class="mouth_middle"></div><div class="mouth_top"></div></div><!-- 脸颊 --><div class="face"></div></div>
</div>

2、CSS的部分：

div {position: absolute;transform-origin: left top;
}
.pig_container {width: 800px;height: 800px;top: 0;left: 50px;
}
.pig_head {width: 300px;height: 200px;top: 100px;left: 100px;border-radius: 95% 50% 50% 50%/ 87% 80% 68% 50%;border: 6px solid #ef96c2;background-color: #ffb3da;transform: rotate(30deg);z-index: 100;box-sizing: border-box;
}
.pig_head_white_left_bottom {width: 200px;height: 154px;bottom: -7px;left: -38px;background-color: #fff;box-sizing: border-box;
}
.pig_head_white_left_top {width: 200px;height: 66px;bottom: 84px;background-color: #ffb3da;box-sizing: border-box;top: 166px;left: 134px;transform: rotate(34deg);z-index: 103;
}
.left_eye, .right_eye, .face, .mouth {z-index: 104;
}
.pig_nose {width: 51px;height: 70px;top: 147px;left: 107px;border-radius: 72% 72% 72% 72%/ 72% 72% 72% 72%;border: 6px solid #ef96c2;background-color: #ffb3da;transform: rotate(36deg);z-index: 103;box-sizing: border-box;
}
.pig_nose_bottom {width: 88px;height: 13px;top: 209px;left: 84px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%; border: 6px solid #ef96c2;background-color: #ffb3da;transform: rotate(35deg);z-index: 102;box-sizing: border-box;border-top-color: #ffb3da;
}
.pig_jaw {width: 97px;height: 104px;top: 249px;left: 141px;border-radius: 0% 0% 0% 76%/ 0% 0% 0% 74%;border: 6px solid #ef96c2;background-color: #ffb3da;transform: rotate(22deg);z-index: 100;box-sizing: border-box;border-top-color: #ffb3da;border-right-color: #ffb3da;
}
.pig_jaw_right {width: 13px;height: 6px;background-color: #ef96c2;top: 373px;left: 186px;transform: rotate(19deg);z-index: 100;
}
.left_eye_bg {width: 29px;height: 29px;top: 177px;left: 170px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #fff;background-color: #fff;z-index: 101;box-sizing: border-box;
}
.left_eye_ball {width: 10px;height: 10px;top: 181px;left: 171px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #000;background-color: #000;z-index: 101;box-sizing: border-box;
}
.left_eye_border {width: 34px;height: 34px;top: 174px;left: 166px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #ef96c2;background-color: transparent;z-index: 101;box-sizing: border-box;
}
.right_eye_bg {width: 28px;height: 28px;top: 194px;left: 205px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #fff;background-color: #fff;z-index: 101;box-sizing: border-box;
}
.right_eye_ball {width: 10px;height: 10px;top: 199px;left: 208px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #000;background-color: #000;z-index: 101;box-sizing: border-box;
}
.right_eye_border {width: 35px;height: 37px;top: 191px;left: 202px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;border: 6px solid #ef96c2;background-color: transparent;z-index: 101;box-sizing: border-box;
}
.mouth_bottom {width: 97px;height: 45px;top: 273px;left: 154px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;border: 6px solid #d44b81;background-color: #000;z-index: 101;box-sizing: border-box;transform: rotate(19deg);
}
.mouth_middle {width: 98px;height: 27px;top: 272px;left: 154px;border-radius: 0% 0% 50% 50%/ 0% 0% 100% 100%;border: 6px solid #d44b81;background-color: #ffb3da;z-index: 101;box-sizing: border-box;transform: rotate(19deg);border-top-color: #ffb3da;
}
.mouth_top {width: 135px;height: 66px;top: 231px;left: 149px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;background-color: #ffb3da;z-index: 101;transform: rotate(13deg);
}
.face {width: 49px;height: 59px;top: 243px;left: 269px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;background-color: #ff96ce;transform: rotate(26deg);
}
.nose_kong_left {width: 12px;height: 12px;top: 179px;left: 93px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;background-color: #da6c9b;z-index: 104;
}
.nose_kong_right {width: 12px;height: 12px;top: 182px;left: 109px;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;background-color: #da6c9b;z-index: 104;
}
.ear_left {width: 24px;height: 52px;top: 126px;left: 226px;border: 6px solid #ef96c2;border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;background-color: #ffb3da;z-index: 99;transform: rotate(18deg);
}
.ear_right {width: 24px;height: 52px;top: 150px;left: 280px;border: 6px solid #ef96c2;border-radius: 50% 50% 50% 50%/ 35% 40% 50% 50%;background-color: #ffb3da;z-index: 99;transform: rotate(36deg);
}
.pig_body_bottom {width: 215px;height: 197px;top: 305px;left: 108px;border: 6px solid #e33b32;border-radius: 50% 50% 50% 50%/ 100% 100% 0% 0%;background-color: #eb5b50;z-index: 99;
}
.hand_left_middle {width: 78px;height: 12px;top: 432px;left: 63px;border-radius: 100% 100% 100% 17%/ 100% 90% 16% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(-35deg);
}
.hand_left_top {width: 28px;height: 9px;top: 415px;left: 63px;border-radius: 100% 100% 100% 35%/ 100% 90% 16% 90%;background-color: #ffbadf;z-index: 99;
}
.hand_left_bottom {width: 20px;height: 9px;top: 420px;left: 93px;border-radius: 60% 59% 65% 90%/ 100% 90% 89% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(98deg);
}
.hand_right_middle {width: 79px;height: 11px;top: 374px;left: 312px;border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(28deg);
}
.hand_right_top {width: 28px;height: 10px;top: 397px;left: 350px;border-radius: 100% 100% 15% 17%/ 99% 92% 90% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(-7deg);
}
.hand_right_bottom {width: 28px;height: 11px;top: 395px;left: 356px;border-radius: 100% 100% 62% 17%/ 99% 92% 90% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(69deg);
}
.left_foot {width: 11px;height: 52px;top: 507px;left: 175px;border-radius: 100% 100% 100% 100%/ 50% 50% 21% 20%;background-color: #ffbadf;z-index: 99;
}
.left_shoes {width: 51px;height: 14px;top: 553px;left: 138px;border-radius: 58% 187% 180% 50%/ 130% 123% 113% 100%;background-color: #000;z-index: 99;transform: rotate(0deg);
}
.right_foot {left: 268px;
}
.right_shoes {left: 230px;
}
.tail_left {width: 19px;height: 8px;top: 472px;left: 330px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;transform: rotate(-9deg);background-color: #ffbadf;z-index: 99;
}
.tail_left_blank {width: 30px;height: 15px;top: 466px;left: 332px;border-radius: 50% 50% 50% 50%/ 0% 0% 100% 100%;transform: rotate(-36deg);background-color: #fff;z-index: 99;
}
.tail_right {width: 21px;height: 5px;top: 451px;left: 343px;border-radius: 0% 0% 51% 50%/ 0% 0% 100% 100%;transform: rotate(31deg);background-color: #fff;z-index: 99;border: 8px solid #ffbadf;border-top-color: #fff;
}
.tail_blank {width: 36px;height: 21px;top: 437px;left: 351px;transform: rotate(34deg);background-color: #fff;z-index: 99;
}
.tail_middle {width: 7px;height: 11px;top: 450px;left: 336px;border: 8px solid #ffbadf;border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;background-color: #fff;z-index: 99;
}
.tail_circle {width: 17px;height: 8px;top: 475px;left: 358px;border-radius: 36% 37% 62% 63%/ 99% 92% 90% 90%;background-color: #ffbadf;z-index: 99;transform: rotate(-40deg);
}

3、最终效果：

小猪佩奇真可爱，人人都爱它。

你要去做一个大人，不要回头，不要难过。

“我错过了很多，我总是一个人难熬。”

div+css画一个小猪佩奇相关推荐

用python画甜小兔_Python 实现画一个小猪佩奇
===================================== 看到佩奇的广告片刷红,为了迎接猪年,咱们也来用Python 画板实现一个效果吧 from turtle import* ...
干货！用C语言画一个小猪佩奇（附源码），针不戳！
分享下如何用 C 语言画小猪佩奇使用带符号距离场(signed distance field, SDF)表示圆形:file:///C:\Users\Administrator.WIN- STED6B9 ...
python代码画小猪佩奇_用 Python 画一个小猪佩奇和哆啦 A 梦
0 前言最近发现了很有意思的东西,有人用 turtle 这个库画了一个小猪佩奇,跑去 GitHub 看了一下代码,发现写这个的人真的很有耐心,居然能写下来. 再找了找,发现有人还画了哆啦 A 梦, ...
python绘图turtle小猪_turtle作图：用turtle画一个小猪佩奇（详解！）
之前的一篇文章大致说了一下turtle这个模块的基本操作,不知道的朋友可以去看看,真的超级简单:python:turtle作图基础. 准备用turtle来画一个网红猪--小猪佩奇. 在这之前,我们先聊 ...
用python的turtle库画一个小猪佩奇
小猪佩奇是一个可爱的小猪.她已经四岁了,与她的妈妈,爸爸,和弟弟乔治生活在一起.佩奇最喜欢做的事情是玩游戏,打扮的漂亮,度假,以及在小泥坑里快乐的跳上跳下和与小羊苏西(她最好的朋友)乔治(她的弟弟)一 ...
python用turtle画小猪佩奇_turtle作图：用turtle画一个小猪佩奇（详解！）
之前的一篇文章大致说了一下turtle这个模块的基本操作,不知道的朋友可以去看看,真的超级简单:python:turtle作图基础. 准备用turtle来画一个网红猪--小猪佩奇. 在这之前,我们先聊 ...
Pytnon画一个小猪佩奇
转载自:http://bbs.51cto.com/thread-1557505-1.html 源码: # coding:utf-8 import turtle as tt.pensize(4) t.h ...
用Python画一个小猪佩奇
星期天没事,给熊孩子画个佩琪玩玩~ #!/usr/bin/env python2 # coding=utf-8import turtle as tt.pensize(8) t.hideturtle() ...
用java画一个小猪佩奇_python 画个小猪佩奇
#!/usr/bin/python#-*- coding: utf-8 -*- importturtle as tdef nose(x,y):#鼻子 t.pu() t.goto(x,y) t.pd() ...

div+css画一个小猪佩奇

div+css画一个小猪佩奇相关推荐

最新文章

热门文章