使用css复刻陪了我一年的小鸡耳机套!

583 阅读3分钟

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

前言

今天我们来从 0 到 1 来画一只小鸡,这个小鸡也是我的耳机套的样子,只不过它刚到家手就快掉了,我也懒得去换。如果我用css给它复原一下昔日光彩。

步骤分解

小鸡身体/脑袋

QQ截图20220914183401.png

小鸡的身体兼脑袋就是个圆角矩形啦,通过 border-radius 设置圆角属性。相信聪明的小伙伴们闭着眼睛都会写啦。

小鸡冠

QQ截图20220914183419.png

鸡冠长得跟葱似的。

它是由两个圆角矩形 叠加 组成的。这里我通过一个 div 标签,通过伪元素 beforeafter 搭配 border-radius 来制作两个圆角矩形,最后通过将它们各自旋转,得到一个大葱,啊不,得到一个鸡冠。

.head {
  position: absolute;
  left: 36%;
  top: -34px;
  z-index: -1;
  &::before {
    position: absolute;
    content: "";
    width: 22px;
    height: 46px;
    border-radius: 10px;
    transform: rotate(-26deg);
    background-color: green;
  }
  &::after {
    position: absolute;
    content: "";
    width: 12px;
    height: 36px;
    border-radius: 10px;
    transform: rotate(26deg) translateX(20px);
    background-color: green;
  }
}

小鸡眼睛

QQ截图20220914183435.png

小鸡的眼睛由两个椭圆组成,圆相比大家都会画吧?长宽相等的矩形设置 border-radius: 50% 就是一个正圆了,我们只要让宽高不同,得到的就是椭圆啦。

鸡喙

QQ截图20220914183445.png

圆圆方方的,想必大家也猜出来了:圆角正方形。

对没错,就是圆角正方形通过 rotate 旋转得到的。

.mouth {
  position: absolute;
  top: 48px;
  left: 50%;
  height: 30px;
  width: 30px;
  border: @public-border;
  border-radius: 4px 20px 20px 20px/ 5px;
  background-color: @public-color;
  transform: rotate(45deg) translateX(-27px);
}

关于 rotate 的更多用法,详见:rotate() - CSS(层叠样式表) | MDN (mozilla.org)

小鸡爪子

QQ截图20220914183457.png

小鸡的手我们用的方法和鸡冠是一样的,也是两个圆角矩形,需要注意的是,通过绝对定位到指定的位置后,由于 .body.handz-index 是相同的,因此 .hand 会盖在 .body 之上,因此我们需要设置 .handz-index: -1

小鸡 jio

QQ截图20220914183512.png

小鸡 jio 是由单个圆角正方形组成的,我这里是用了一个标签,前后通过伪元素 beforeafter 来拼接另外两个圆角矩形。

.leg {
  bottom: -10px;
  &,&::before,&::after {
    position: absolute;
    height: 8px;
    width: 8px;
    background-color: @public-color;
    border: @public-border;
    border-radius: 3px;
  }
  &::before {
    content: "";
    left: -10px;
    top: -1px;
  }
  &::after {
    content: "";
    left: 8px;
    top: -1px;
  }
}
.left-leg {
  left: 20%;
}
.right-leg {
  right: 20%;
}

小鸡背包

QQ截图20220914183522.png

小鸡背包由两个部分组成:背带+包。

那么背带怎么做呢?我们观察可以发现背带就是个圆弧,老观众应该都晓得了,圆弧的处理就是将背景透明的半圆外加带色边框组成的。

QQ截图20220914185357.png

transform: rotate(10deg);
height: 20px;
width: 100%;
border-bottom: 8px solid @public-color;
border-radius: 50% / 0 0 100% 100%;

可以看到,这里我是使用了 border-bottom 来充当背带的角色。

背带有了,没有包怎么行呢?

背包就是一个圆角矩形定位的,眼睛部分和小鸡眼睛是一个原理,唯一不同的是背包的眼睛下面带了红霞,这里我是使用伪元素 after (对,又是伪元素)来做的,将伪元素的 content 属性值设置为 /// ,因为有些偏移,需要在 原本位置 的基础上,向左移一点,这个场景使用相对定位非常合适了。

至此,我们的背带小鸡就完成了。

码上掘金