前言

中秋佳节，大家都在讨论月饼啊、嫦娥啊，但我们怎么能忘了可爱的玉兔呢。

今天我们就来用 css 画一只玉兔出来。

涉及知识点

position

relative 相对定位是一个非常容易理解的概念，如果将一个元素设置为相对定位，可以设置其水平位置和垂直位置，这个元素相对于元素的起点开始移动。需要注意的一个地方是，相对定位的元素虽然位移了，但是原本位置的空间 仍是被占据的 。

absolute 绝对定位，绝对定位是相对于非 static 定位的元素来说的，如果没有，则默认为 body 。工作中我们经常的使用 relative 给父元素，子元素设置为 absolute 来设置子元素的位置。

伪元素 ::after

用来向选中的元素后插入一个内容，通常配合 content 属性使用，来指定要插入的内容。

transform 变换

transform 向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

rotate：用来将元素旋转给定的角度。可以按照度数、刻度、弧度或转角设置角度。本文使用角度设置，单位为 deg 。

transform：本文中使用到了 skewX 倾斜，translateX 沿 x 轴移动。使用绝对定位搭配 translateX 还可以实现未知宽度的横向居中。skewX 向 x 轴倾斜一定的角度。

结束语

代码虽然简单，但也是学以致用的一种体现，多结合不同的技巧，可以更好的帮助我们理解。