一起用代码吸猫！本文正在参与【喵星人征文活动】。

开篇

众所周知，除了我以外的程序员都有猫，但是今天，我要用我毕生所学的前端（切图）技能来给自己造一只猫。
由于长期在各种管理系统的界面中挑战自己，所以我的CSS水平“非常的高”，所以今天就打算让自己用纯CSS给自己先画一只猫，而且是一只黑猫，为了不让别人偷走我的猫，我还把他藏在了黑暗中。但是为了不让自己在黑暗中也完全看不到自己的猫，所以我又添加了神奇的魔法（hover），这样我就可以大概看清楚猫的位置了。

正片

最终效果预览

画猫

虽然我没有猫，但是没养过猫，还没有偷看过别人养的猫吗😂，在网上长期云撸猫的我，掌握了大量的猫猫形态总结。首先猫有一个头，其次猫有一个身体，然后有四条腿和一个尾巴。所以我们只需要把这些东西按照顺序一个个用HTML先构建出基础的架构，然后在添加CSS样式就可以了。

身体的架构部分

#app
  .stage
    .background
    .cat
      .body
        .tail
      .fore-legs
      .face
        .eyes

样式部分

首先我们要让猫猫呆在一个完全空旷的场景，但是body跟html自带的部分margin会侵占一部分不必要的空间，我们把它清除。

html,body {
  margin: 0;
  overflow: hidden;
}

一开始我们需要看到猫猫，所以先给背景设置成浅灰色。

.stage {
  .background-color: #eee;
}

然后我们先绘制出猫猫头，猫猫头是一个黑色的椭圆形，然后耳朵使用两个伪元素代替，利用视觉差，直接绘制两个黑色的正方形，进行旋转即可，不过要注意旋转的左右耳中心点要分别设置在左下角跟右下角。

.cat {
  .face {
    position: relative;
    width: 60px;
    height: 40px;
    background-color: #000;
    border-radius: 100%;
  }
  &::before,&::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--catColor);
    z-index: 0;
  }
  &::before {
    left: 0px;
    transform: rotate(30deg);
    transform-origin: bottom right;
  }
  &::after {
    right: 0px;
    transform: rotate(-30deg);
    transform-origin: bottom left;
  }
}

完成第一步的效果感觉有点像数码宝贝里的黑球兽😂

然后是添加眼睛，眼睛就是两个黄色的圆形

.eyes {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  &::before,&::after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: rgb(251,207,46);
  }
  &::before {
    left: -20px;
  }
  &::after {
    right: -10px;
  }
}

添加完以后更像黑球兽了，不过没关系，只需要添加身体，大概就会有点差异了

剩下的步骤就是把身体之类的也用类似的方法添加css，这里不再描述，唯一要提到的是画尾巴用到的一些小技巧（没啥用）。由于普通的HTML元素是正常情况下是没办法画出弯曲的线条的，所以这里还是要利用一些视觉效果来实现。
尾巴其实是两个叠加在一起的圆形，一个大，一个小一些，大的圆形是猫的颜色，而小的是背景颜色，最终写出来的是一个黑色的圆环（虽然最终写完才想起来，直接用描边好像更方便）,然后用一个外层的容器可以用跟圆环对半的宽度对圆环进行截取，得到一个半圆环。当然这种写法写出来的圆环比较短，但是如果可以，通过拼接多个圆环是可以实现一个完美的猫尾巴（虽然我最终没有这么写）

把猫藏起来

其实最终想把猫藏起来，只需要让背景完全变成黑色就可以，并且在鼠标放上去的时候可以改变背景颜色就可以。
于是一开始，我把背景颜色提取成了一个变量，但是最开始因为使用的是scss，思路进入了一个误区，那就是其实scss的变量只在编译期间有效，特别是我是在codepen上面完成的，所以没办法实现下面这种理想的情况。

#app {
  $bgColor: #000; // 最开始默认为黑色
  &:hover {
    $bgColor: #222; // 让颜色稍微亮一些
  }
}

但是css的原生变量是可以实现的，最终我将背景颜色抽取成了原生变量，简单的解决了这个问题。

#app {
  --bgColor: #000; // 最开始默认为黑色
  &:hover {
    --bgColor: #222; // 让颜色稍微亮一些
  }
}

结语

新人第一次发文，也是刚刚开始工作的前端开发新人，技术不精，写了个完全不如别人美观的css绘制猫猫，希望大家多多支持。
最终代码发布在寻找猫猫 (codepen.io)上，欢迎大家查看。在最后还给猫猫添加了一个眨眼睛的简单动画，增加了一些动物的感觉😂。虽然我也想养猫，而且现在也在外面租房工作，可是给自己做饭都困难十足的我，还是要多考虑考虑了，总有一天，也会有自己的猫吧，真正的那种。