纯CSS+HTML绘制小猪佩奇---泥腿子前端出品

最新推荐文章于 2024-06-18 10:00:00 发布

转载

最新推荐文章于 2024-06-18 10:00:00 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c6008a5e51d45013528481a

文章标签：

#前端 #ViewUI

本文记录了一位前端开发者如何利用HTML和CSS技术，通过div盒模型和border-radius属性，手工绘制小猪佩奇的图案。文章详细介绍了绘制过程中的难点和技巧，特别是佩奇的裙子和尾巴的实现，并提供了GitHub源码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

年前也不知从具体什么时候开始我儿子迷上了小猪佩奇，再加上朋友圈疯狂传播的鼓风机版小猪佩奇宣传片，这两件事情促使我这个泥腿子前端产生了用代码绘制一副小猪佩奇图案的想法，作为一名“优秀的”开发来说，有想法就落实到行动中，这是必须的职业素养。代码是1月22号完成的，当时想发表出来的，由于年底工作比较繁忙，就拖到了现在。话不多说，先上效果图：

绘制这张图时，HTML主要就是div盒模型，css主要运用到了border-radius以及transform属性，例如绘制佩奇裙子的时候CSS和HTML代码如下：

/* 佩奇身体 泥腿子前端*/
.pigBody {
   background-color: #de384e;
   border: 6px solid #BE002E;
   position: absolute;
   z-index: 16;
   bottom: 94px;
   left: 300px;
   width: 150px;
   height: 116px;
   box-sizing: border-box;
   border-radius: 110% 110% 0 0/260% 260% 0 0;
}
<!-- 佩奇身体 start 泥腿子前端-->
<div class="pigBody"></div>
<!-- 佩奇身体 end 泥腿子前端-->复制代码

裙子效果如图：

这个难点就是要弄懂border-radius 属性的具体定义和用法，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。