likes
comments
collection

黑与白的融合!手把手带大家画一只大熊猫!

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

前言

熊猫是我国的国宝,同时也是我们表情包界的顶流,相信大家对这个熊猫头并不陌生吧,今天我将带领大家用 CSS 画一只简单的大熊猫来。

效果预览

黑与白的融合!手把手带大家画一只大熊猫!

思路解析

我们先看看熊猫的整体,无一不体现它的圆润,好家伙,除了人以外的生物,圆起来都可爱。

那么“圆”也是熊猫的一个特点,用几何来表示的话,这只大熊猫基本上全是由椭圆构成。圆圆的耳朵,圆圆的脑袋,圆圆的身体,圆圆的四肢,圆圆的腮红(又是一个细节啦)。

几何结构分析完后,相信大家都知道,我们要想用 CSS 画出大熊猫,首先要会画圆。相信在座的各位都知道盒模型,每个元素都会被表示为一个矩形盒子,我们给这个元素指定宽高,得到的会是一个“盒子”形状,有棱有角的,倘若我们想要把这个角磨平,就要靠另一个 CSS 属性 border-radius 啦。

开发中我们经常以 border-radius: 4px 类似这种形式去使用,其实这是一种缩写,和 margin 属性一样,它位置之分,分别是左上角、右上角、右下角以及左下角,仍然是个顺时针,不妨碍我们去记忆它。而 border-radius 是有 8 个值的,通过这后 4 个值,我们可以很容易的得到半圆,也就是熊猫耳朵的部分。

如此一来,熊猫整体我们都分析了一遍,接下来代码实操阶段。

脑袋 & 身体

黑与白的融合!手把手带大家画一只大熊猫!

黑与白的融合!手把手带大家画一只大熊猫!

脑袋和身体都是个椭圆,它们不是整体胜似整体,就一起说了。我们要注意的是,身体这个椭圆需要移除上边框,这样身体和脑袋的连接处不会那么生硬,同时,需要使用 rotate 属性将身体旋转一些角度,使得缺口和脑袋连接上。

// body 部分代码
.body {
  height: 96px;
  width: 130px;
  background-color: #fff;
  border-radius: 50%;
  margin-top: -24px;
  transform: rotate(-10deg);
  border-top-color: #fff;
}

四肢

黑与白的融合!手把手带大家画一只大熊猫!

四肢都是椭圆,椭圆的画法上面提到过了,我们需要的就是将四肢通过定位的方式,给 .body 设置为 relative 相对定位,然后四肢通过 absolute 绝对定位到指定位置,再通过 rotate 调整它们的角度,就大功告成啦。

耳朵

黑与白的融合!手把手带大家画一只大熊猫!

耳朵我用两个圆去模拟的,使用绝对定位,然后通过调整 z-index 属性将两个圆放置于 .head 下层、

眼睛 & 鼻子

黑与白的融合!手把手带大家画一只大熊猫!

眼睛是椭圆来模拟的,鼻子我通过绘制一个圆角矩形,给其添加伪元素 before 来做上半部分。

扇形的绘制可能有的小伙伴不懂,和我们矩形添加边框是一个道理,设置 border-top 的颜色不透明就可以了。

最后就是两个腮红了,也是两个圆,通过滤镜 filter: blur 来将它们模糊处理。