likes
comments
collection
share

重拾童年记忆——手把手带大家画一只小摩尔~!

作者站长头像
站长
· 阅读数 11

前言

相信很多小伙伴小时候都有玩过摩尔庄园啊、赛尔号啦这种页游,想起来之前上学的时候,只有放寒暑假的时候才能玩,所以放假的时候都是报复性玩游戏,早上七点前不起来就亏了一样,比上网吧还争分夺秒。

重拾童年记忆——手把手带大家画一只小摩尔~!

如今手游的摩尔庄园出了,我也入驻了一年多了,今天就带大家动手去画一个小摩尔,重拾童年回忆。

思路解析

鼹鼠脑袋

重拾童年记忆——手把手带大家画一只小摩尔~!

鼹鼠脑袋的代码比较容易,就是一个正圆,相信老观众都会画了。

height: 150px;
width: 150px;
background-color: #46BFFF;
border-radius: 50%;

border-radius 的值设置为 50% 的表现形式就是一个正圆了。

鼹鼠眼睛

重拾童年记忆——手把手带大家画一只小摩尔~!

鼹鼠的每个眼睛都是由两个椭圆构成的,椭圆就是长宽不等的圆,也就是说,我们在正圆的基础上,将宽高任意一个进行调整,正圆就会变成椭圆了。

height: 40px;
width: 22px;
border-radius: 50%;

眼睛内的高光也是个椭圆,可以使用伪元素进行绘制,更加符合语义且减少标签嵌套数量。

鼹鼠鼻子

重拾童年记忆——手把手带大家画一只小摩尔~!

鼹鼠的鼻子是由一个正圆和一个高光组成的,可以发现,鼻子的高光有一个模糊的效果。

这是因为添加了滤镜 filter: blur(2px) 。我们可以看看不加滤镜的效果:

重拾童年记忆——手把手带大家画一只小摩尔~!

可以发现在加了滤镜之后高光显得更自然些。

鼹鼠脸

重拾童年记忆——手把手带大家画一只小摩尔~!

鼹鼠的脸是由两个圆+一个半圆组成的。

重拾童年记忆——手把手带大家画一只小摩尔~!

重拾童年记忆——手把手带大家画一只小摩尔~!

我们可以使用定位+伪元素的方式,拼成一张脸。同时,由于绝对定位的关系,这张脸实际上会挡住鼻子,而我们正常来说脸应该在鼻子下面,所以在画鼻子的时候,我们应该设置其 z-index 属性 大于 脸的 z-index 属性。如果圆半径大了的话,是有可能会超出 .head 的范围的,我们可以给 .head 类添加 overflow: hidden 属性防止脸溢出到头外面。

鼹鼠嘴

重拾童年记忆——手把手带大家画一只小摩尔~!

鼹鼠的嘴有三个部分了,一个牙齿,一个嘴,一个舌头。嘴和舌头都是半圆,这个和上面的写法差不多。

border-radius: 50% / 0 0 100% 100%

而牙齿的部分是由一个部分圆角的矩形来画的,我们单独设置矩形的下边部分的圆角:

border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;

通过绝对定位使之和嘴巴上面的线重合。