使用CSS实现皮卡丘

码农天地 - 2020-06-19 14:41:48

---

前言

当我学完css和js后，冒出来一个想法。自己去实现一个可爱的卡通人物。于是我就去codepen找素材，最终选择了皮卡丘，如下图。

准备工作

在开始写皮卡丘之前，我先观察了皮卡丘的整个页面。发现如果要很好的实现这个皮卡丘你不能像写传统网页那样从左到右布局，而是要从中间布局，因为左右两边对称。理清楚了思路之后现在开始编写页面结构。

<p class="skin"> <p class="eye left"></p> <p class="eye right"></p> <p class="nose"> <p class="yuan"></p> </p> <p class="mouth "> <p class="up"> <p class="lip left"></p> <p class="lip right"></p> </p> <p class="down"> <p class="yuan1"> <p class="yuan2"></p> </p> </p> </p> <p class="mouth "></p> <p class="face left"> <img src="src/img/flash.gif" alt="flash"> </p> <p class="face right"> <img src="src/img/flash.gif" alt="flash"> </p> </p>

页面结构如上图所示，当我们编写完html结构，就可以动手去写css。

CSS的实现

在这个地方我们可以暂时先停一下，再次理清思路。这个皮卡丘的最难点的部分在哪里？在于皮卡丘嘴巴上的弧线以及下面椭圆形的舌头。

在实现皮卡丘嘴巴上的弧线时，我产生了两个想法。第一用一个标签包裹实现这个弧线，第二分别用两个标签去包裹实现这两个弧线。最终我选择了第二种。在这里我观察皮卡丘嘴巴上的弧线发现这个弧线就是圆角矩形的四分之一，加上旋转就可以实现这两个弧线。

具体实现如下

.mouth .up { position: relative; top: -20px; z-index: 1;}.mouth .up .lip { border: 3px solid black; height: 30px; width: 100px; background: #ffe600; border-top-color: transparent; border-right-color: transparent; position: relative; position: absolute; left: 50%; margin-left: -50px;}.mouth .up .lip.left { border-radius: 0 0 0 35px; transform: rotate(-20deg) translateX(-53px);}.mouth .up .lip.right { border-radius: 0 0 35px 0; transform: rotate(20deg) translateX(53px);}.mouth .up .lip::before { content: ''; display: block; width: 7px; height: 30px; position: absolute; bottom: 0; background: #ffe600;}.mouth .up .lip.left::before { right: -6px;}.mouth .up .lip.right::before { left: -6px;}

第一个大难点已经解决,接下来解决第二个难点。如何实现皮卡丘的下嘴唇。

观察皮卡丘的舌头我发现这实际上是一个椭圆的一部分或者圆角矩形的一部分，那我就需要截取一部分的椭圆或者圆角矩形就能实现皮卡丘的舌头。第二个解决点怎么实现皮卡丘舌头粉色的部分,有了上面的思路之后，沿着这个思路继续想，实际上这就是两个圆角矩形或者椭圆形的交界处实现的。

画的不是太好各位客官见谅了。

具体的代码的实现如下

.mouth .down { height: 180px; position: absolute; top: 5px; width: 100%; overflow: hidden;}.mouth .down .yuan1 { border: 3px solid black; width: 150px; height: 1000px; position: absolute; bottom: 0; left: 50%; margin-left: -75px; border-radius: 75px/300px; background: #9b000a; overflow: hidden;}.mouth .down .yuan1 .yuan2 { width: 200px; height: 300px; background: #ff485f; position: absolute; bottom: -160px; left: 50%; margin-left: -100px; border-radius: 100px;}

这两个难点解决了差不多就完成了整个皮卡丘的一半，剩下的就可以自己去完成了。

结尾

当我写完了皮卡丘的css之后只能感叹于css的神奇，也让我更加深刻的理解了css。在此之前我认为css很简单，但是真正做皮卡丘的时候，还是特别特别难，这个难在于需要你用各种各样的方法去实现你想要的效果，这就需要很好的基础以及想法，在此感谢指导我的各位老师和同学了。

Tags 标签