我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!
前言
中秋佳节,中国自古就有关于嫦娥玉兔的传说,今天我带给大家的是,使用css来画一只吃萝卜的玉兔。
过程分解
脑袋 & 耳朵
我们首先来观察一下这个兔子,兔子的两个耳朵是一长一短,并且每只耳朵角度不同,显得更加灵动。
脑袋部分是一个偏正圆的椭圆。很多人不知道椭圆怎么画,相信大家还是猜的出来和 border-radius
有关,我们平时用的 border-radius
都是简写形式,实际上它有 8
个值,前 4
个表示的是 x
轴代表半径长度,后四个值表示的是 y
轴代表的半径长度,我们调整各个值的大小,就能得到各种各样的带弧度的图形,是不是很有意思呢?
眼睛
眼睛部分则是由两个部分组成,一个是眼睛主体,一个是亮光,亮光的存在使得眼睛更有神。眼睛和亮光都是椭圆组成的。
嘴巴
兔子的嘴巴是由一个圆弧组成的,以定位的形式,将嘴巴放在眼睛的中下方。
身体
身体部分是一个馒头状的不规则圆。我们通过调整上下部分的 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;
}
双手
手是圆弧模拟的,和嘴巴的是实现方式是一样的,这里直接上码上掘金看代码吧。
胡萝卜
小兔子的手里是捧着萝卜的,萝卜通过椭圆+部份边框的正方形组成。
椭圆想必大家都会的,那么叶子部分怎么做呢?
我们可以只设置矩形右边框为绿色的,其他几个边都是透明的,然后通过定位的方式将它拼接到萝卜主体的后方,这样一个萝卜就完成啦。