中秋到了,使用CSS来画一只吃萝卜的玉兔吧

463

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

前言

中秋佳节,中国自古就有关于嫦娥玉兔的传说,今天我带给大家的是,使用css来画一只吃萝卜的玉兔。

过程分解

脑袋 & 耳朵

微信截图_20220917032449.png

我们首先来观察一下这个兔子,兔子的两个耳朵是一长一短,并且每只耳朵角度不同,显得更加灵动。

脑袋部分是一个偏正圆的椭圆。很多人不知道椭圆怎么画,相信大家还是猜的出来和 border-radius 有关,我们平时用的 border-radius 都是简写形式,实际上它有 8 个值,前 4 个表示的是 x 轴代表半径长度,后四个值表示的是 y 轴代表的半径长度,我们调整各个值的大小,就能得到各种各样的带弧度的图形,是不是很有意思呢?

眼睛

微信截图_20220917032615.png

眼睛部分则是由两个部分组成,一个是眼睛主体,一个是亮光,亮光的存在使得眼睛更有神。眼睛和亮光都是椭圆组成的。

嘴巴

微信截图_20220917032624.png

兔子的嘴巴是由一个圆弧组成的,以定位的形式,将嘴巴放在眼睛的中下方。

身体

微信截图_20220917032836.png

身体部分是一个馒头状的不规则圆。我们通过调整上下部分的 border-radius 不同来实现。

.body {
    position: relative;
    margin: 0 20px;
    height: 60px;
    width: 80px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border: @public-border;
}

双手

微信截图_20220917032846.png

手是圆弧模拟的,和嘴巴的是实现方式是一样的,这里直接上码上掘金看代码吧。

胡萝卜

微信截图_20220917032914.png

小兔子的手里是捧着萝卜的,萝卜通过椭圆+部份边框的正方形组成。

椭圆想必大家都会的,那么叶子部分怎么做呢?

我们可以只设置矩形右边框为绿色的,其他几个边都是透明的,然后通过定位的方式将它拼接到萝卜主体的后方,这样一个萝卜就完成啦。

码上掘金