div+css画一个小猪佩奇
用DIV+CSS画一个小猪佩奇，挺可爱的，嘻嘻。
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>
CSS的部分
div {
position: absolute;
transform-origin: left top;
}
.pig_container {
width: 800px;
height: 800px;
top:;
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:;
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:;
}
.left_eye, .right_eye, .face, .mouth {
z-index:;
}
.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:;
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:;
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:;
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:;
}
.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:;
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:;
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:;
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:;
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:;
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:;
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:;
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:;
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:;
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:;
}
.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:;
}
.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:;
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:;
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:;
}
.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:;
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:;
}
.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:;
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:;
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:;
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:;
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:;
}
.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:;
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:;
}
.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:;
}
.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:;
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:;
}
.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:;
}
.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:;
transform: rotate(-40deg);
}
最终的效果
小猪佩奇真可爱，人人都爱它。
"我错过了很多，我总是一个人难熬。"
div+css画一个小猪佩奇的更多相关文章
- Python 实现画一个小猪佩奇
===================================== 看到 佩奇的广告片刷红,为了迎接猪年,咱们也来用Python 画板实现一个效果吧 from turtle import* ...
- 【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- 使用css画一个箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- python 画个小猪佩奇
不知道大家小时候有没有学习过logo语言,就是操纵一只小王八,来画各种图案.博主小学微机课就学习了这个,最近发现python的turtle包就是logo语言,所以画个小猪佩奇和大家分享. 代码来自知乎 ...
- Effective前端3：用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- Effective前端1---chapter 2 用CSS画一个三角形
1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
随机推荐
- Spring Boot 启动以后然后再加载缓存数据 CommandLineRunner
实际应用中,我们会有在项目服务启动完成以后去加载一些数据或做一些事情(比如缓存)这样的需求. 为了解决这样的问题,Spring Boot 为我们提供了一个方法,通过实现接口 CommandLineRu ...
- ZooKeeper（二）：多个端口监听的建立逻辑解析
ZooKeeper 作为优秀的分布系统协调组件,值得一探究竟.它的启动类主要为: 1. 单机版的zk 使用 ZooKeeperServerMain 2. 集群版的zk 使用 QuorumPeerMai ...
- crm-4权限
1.rbac-优化login函数 因为login是业务逻辑 ,而rbac是个组件 ,将rbac在login的代码分离 ###初始化权限函数分离出去 rbac/service/permission fr ...
- 何为http？何为RPC？
RPC(即Remote Procedure Call,远程过程调用)和HTTP(HyperText Transfer Protocol,超文本传输协议)他们最本质的区别,就是RPC主要工作在TCP协议 ...
- Android之okhttp实现socket通讯（非原创）
文章大纲 一.okhttp基础介绍二.socket通讯代码实战三.项目源码下载四.参考文章 一.okhttp基础介绍 https://www.jianshu.com/p/e3291b7808e7 ...
- iOS 应用程序启动时要做什么
当您的应用程序启动(无论是在前台或后台),使用您的应用程序委托application:willFinishLaunchingWithOptions:和application:didFinishLaun ...
- springcloud微服务实战:Eureka+Zuul+Ribbon+Hystrix+SpringConfig
原文地址:http://blog.csdn.net/yp090416/article/details/78017552 springcloud微服务实战:Eureka+Zuul+Ribbon+Hyst ...
- 5个 JS 解构有趣的用途
摘要: 玩转ES6解构赋值. 原文:5个 JS 解构有趣的用途 译者:前端小智 1. 交换变量 通常交换两个变量的方法需要一个额外的临时变量,来看看例子: let a = 1; let b = 2; ...
- aspx使用KindEditor副文本框插件出现检测到有潜在危险
web配置添加 <httpRuntime requestValidationMode="2.0" /> aspx页面添加 ValidateRequest=&q ...
- Java学习笔记（3）--- 内部类,基本数据类型
1.内部类(nested classes): a.定义: 内部类其实就是一个类中还包含着另外一个类,如同一个人(外部类)是由大脑.肢体.器官等身体结果组成,而内部类相当于其中的某个器官之一,例如心脏: ...