Suck the cat with code! This paper is participating in[Cat Essay Campaign].

The opening

It’s no secret that every programmer except me has a cat, but today I’m going to use my lifelong front-end skills to build a cat for myself. Because I have been challenging myself in various management system interfaces for a long time, my CSS level is “very high”, so today I plan to use pure CSS to draw a cat for myself, and it is a black cat, in order not to let others steal my cat, I also hid it in the dark. But in order not to see my cat completely in the dark, SO I added the magic (Hover), so THAT I can roughly see the cat’s position.

positive

Final preview

Draw a cat

Although I do not have a cat, but did not raise a cat, has not peeked at others to raise the cat 😂, on the Internet for a long time cloud cat I, master a large number of cat form summary. First a cat has a head. Second a cat has a body. Then it has four legs and a tail. So we just need to put these things in order to build the basic architecture in HTML, and then add CSS styles.

An architectural part of the body

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

Style part

First of all, we want to make the cat stay in a completely empty scene, but the body and HTML part of the margin will occupy some unnecessary space, we clear it.

html.body {
  margin: 0;
  overflow: hidden;
}
Copy the code

To start, we need to see the cat, so make the background light grey.

.stage {
  .background-color: #eee;
}
Copy the code

Then we first draw the cat head, the cat head is a black oval, and then use two false elements to replace the ears. By taking advantage of poor vision, draw two black squares directly and rotate them. However, it should be noted that the center points of the rotated left and right ears should be set at the lower left and right corners respectively.

.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; }}Copy the code

The effect of completing step 1 feels a bit like the Black Orb in digimon 😂

Then add eyes, which are two yellow circles

.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; }}Copy the code

It looks more like a black orb, but it doesn’t matter, you just need to add the body and it will probably be a little different

The rest of the step is to add CSS in a similar way to the body and so on. I won’t describe it here, except for a few tricks for drawing the tail. Since normal HTML elements don’t normally draw curved lines, we’ll use some visual effects here.

Tail is actually two superimposed together round, a big, a small, large, round is the color of the cat, and the background color is small, the final written is a black circle (although the final written just to think of it, it seems more convenient) with stroke directly, and then with a container can be used with the outer circle half the width of the ring for interception, get one and a half circle. Of course the circles are shorter, but if possible, it’s possible to create a perfect cat tail by stitching together multiple circles (although I didn’t end up doing this).

Hide the cat

In the end, all you need to do to hide the cat is turn the background completely black and change the background color when you place the mouse over it. At first, I extracted the background color as a variable, but at first, using SCSS, I fell into the trap of thinking that the SCSS variable was only valid at compile time, especially since I was working on codepen, so I couldn’t achieve the following ideal situation.

#app {
  $bgColor: # 000; // The initial default is black
  &:hover {
    $bgColor: # 222; // Make the color lighter}}Copy the code

However, CSS native variables can be realized, and finally I extracted the background color into a native variable, which simply solved the problem.

#app {
  --bgColor: # 000; // The initial default is black
  &:hover {
    --bgColor: # 222; // Make the color lighter}}Copy the code

conclusion

It is the first time for the new person to publish a paper. He is also a front-end developer who has just started work. He is not skilled in technology. The final code is published on Finding Cat (codepen. IO). Please check it out. At the end of the cat added a simple animation of blinking eyes, adding some animal feeling 😂. Although I’d love to have a cat, and now I’m working out of a rented house, I’m having a hard time cooking for myself, so I’m going to have to give it some thought. One day, I’ll have a cat of my own, a real one.