java输出皮卡丘_使用CSS实现皮卡丘

前言

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

准备工作

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

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

CSS的实现

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

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