【前端切图】用css画一个卡通形象-小猪佩奇
2024-06-03 01:41:13
最近在腾讯云技术社区遇到了一位奇才，用css画出了一个社会人小猪佩奇，不得不服。研究了一下他的文章https://segmentfault.com/a/1190000014909658，感觉甚是有趣，果断收藏。
话不多说，直接贴一张生动到一塌糊涂的图。
图片.png
前端代码如下：
<!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/05f416aefbe190后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。文末福利：关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群
转载于:https://www.cnblogs.com/wangting888/p/9701479.html
【前端切图】用css画一个卡通形象-小猪佩奇相关推荐
- html css画小猪佩琪,【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- 用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- css画一个卡通动画
1.效果图 2.代码 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- css html弄出哆啦a梦,用css画一个哆啦A梦
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! body{ background-color: #66B3FF; height: 300px; ov ...
- css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- 介绍一个前端切图神器avocode
2019独角兽企业重金招聘Python工程师标准>>> 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而 ...
- 前端学习之路—用css画一个圆形，三角形，椭圆
用css画一个圆形,三角形,椭圆 一.圆形 css代码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
- 前端切图神器avocode
前端切图神器avocode 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而前端一般都是用photoshop,但是这个兵器 ...
- 如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
- css画心形原理,如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
最新文章
- 2018-4-8使用兔子的例子对比说明遗传算法，局部搜索，禁忌搜索，模拟退火方法
- XSS学习-初出茅庐
- python绘制3d图-使用python绘制3d的图形
- 今天微软的office 2010终于发布了！
- 瞬变电磁法的基本原理与TEM正演技术
- 信息系统项目管理知识--项目沟通管理
- java注释模板_Java注释模板设置
- 盘点无人机的关键技术点
- C++ Primer 第八章 标准IO库(转载)
- 分层模式下的Lazy Load ——探索Domain Model系列（下）--转
- PHPStorm 设置背景图片
- 解决求平均值出现加和导致的溢出问题
- cocos2dx 基础
- mac 思科 链路聚合_思科交换机配置链路聚合的方法
- mac 树莓派 kali linux系统,MacOS制作树莓派kali系统
- 《蜥蜴脑法则》读后感
- BASE64Encoded() 方法报错说方法未定义
- 图像处理领域顶级期刊及会议
- 如何保护您的域名系统免遭劫持
- SVM支持向量机个人总结及理解
热门文章
- 百度网盘也能BT下载ED2K
- JAVA运行时，获取运行路径和JRE路径
- 编译OpenJDK12:Target CPU mismatch. We are building for x86_64 but CL is for ; expected x64
- 稀土储量由80%变成了35%？这是何等的。。。
- 无锡公交也有两套支付
- 中国税负68%，世界排名12
- 解决办法：undefined reference to symbol 'pthread_mutexattr_settype@@GLIBC_2.2.5'
- php通用编码,php字符串怎么转换编码
- basic语言基础 chm_拒付论文装订费错失博士学位，C语言之父毕业论文丢失52年重见天日...
- java 封装优化工具,Java开源封装工具