【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才，用css画出了一个社会人小猪佩奇，不得不服。研究了一下他的文章https://segmentfault.com/a/1190000014909658，感觉甚是有趣，果断收藏。
话不多说，直接贴一张生动到一塌糊涂的图。
前端代码如下：
<!DOCTYPE html>
<html>
<head>
<title>用css画一个小猪佩奇</title>
<style type="text/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: 309px;
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;
}
.pig_shadow {
width: 240px;
height: 47px;
top: 535px;
left: 101px;
border-radius: 50% 50% 50% 50%/ 50% 50% 50% 50%;
background-color: rgba(171, 171, 171, 0.7);
transform: rotate(-1deg);
}
.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);
}
</style>
</head>
<body>
<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="pig_shadow"></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>
</body>
</html>
参考链接：https://segmentfault.com/a/1190000014909658
注：
原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。
公众号回复“1”，拉你进程序员技术讨论群.
【前端切图】用css画一个卡通形象-小猪佩奇的更多相关文章
- Effective前端3：用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- Effective前端1---chapter 2 用CSS画一个三角形
1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
- 前端切图相关ps技术
标签(空格分隔): 前端切图 复制图层到一个新的ps文件 对于单个图层 1.选中图层 2.CTRL+A全选 3.CTRL+C 4.CTRL+N新建文件,文件大小默认就可以(背景透明也在这个面板设置), ...
- 使用css画一个箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 前端切图神器-cutterman
之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- div+css画一个小猪佩奇
用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...
- Effective前端(3)用CSS画一个三角形
来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...
随机推荐
- 【js基础】判断是否是合法邮箱地址（正则表达式的应用）
2019-01-21 09:11:21 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- Comput_picture
import requestsfrom pyquery import PyQuerycount = 1url = "https://www.169tp.com/diannaobizhi/&q ...
- Android Studio使用Mob来获取手机验证码加上倒计时
再根据上编的基础上再添加倒计时即可 添加一个类TimeCountUtil package zhu.com.yzm4; import android.os.CountDownTimer; import ...
- 常用Linux命令 mount df dd
mount -t tmpfs tmpfs ~/build -o size=1G -t 对应的是类型 -o 对应的是选项 tmpfs是Linux/Unix系统上的一种基于内存的文件系统.tmpfs可以使 ...
- python编程练习
python练习之冒泡排序: python代码: #coding=utf-8 if __name__=="__main__": arr=[3,2,1,7,11,4,5,8] pri ...
- hdu4253 Two Famous Companies --- 二分+MST
给n个点.m条边的图.每条边要么属于a公司,要么属于b公司.要求一颗最小生成树,条件是当中属于a公司的边数为k. 这题做法非常巧妙. 要求最小生成树,但有一定限制,搜索.贪心显然都不正确. 要是能找到 ...
- webgoat 7.1 实战指南
WSASP中文文档参考链接: http://www.owasp.org.cn/owasp-project/2017-owasp-top-10 OWASP Top 10 2017中文版V1.3http: ...
- Jmeter作为工具的性能测
[原创]相对完整的一套以Jmeter作为工具的性能测试教程(接口性能测试,数据库性能测试以及服务器端性能监测) 准备工作 jmeter3.1,为什么是3.1,因为它是要配合使用的serveragent ...
- POJ 2457 BFS
题意: 说人话: 从A到B连边 找从1到k的最短路 并输出路径(随便一条即可 ) 如果不能到达 输出-1 思路: 搜 //By SiriusRen #include <queue> #in ...
- Mahout的推荐系统
Mahout的推荐系统 什么是推荐系统 为什使用推荐系统 推荐系统中的算法 什么是推荐系统 为什么使用推荐系统? 促进厂商商品销售,帮助用户找到想要的商品 推荐系统无处不在,体现在生活的各个方面 图书 ...