The reason for the cat switch

Idle egg hurts

First, make a draft of my elementary school drawing skills

First put a finished product, painting too ugly, don’t blame

Then get down to business

Write a box, do not write the background layer, write a main box, put an input box and label box, label for the input box and label box tied together

<body>
    <div class="container">
        <input type="checkBox" id='a' class="inputBox">
        <label for="a" class="labelBox">
            <div class="cat"> </div>
        </label>
    </div>
</body>
Copy the code

Add styles and make the input box disappear

    * {
        padding: 0;
        margin: 0;
    }

    body {
        /* background-color: #222222; * /
        background-color: #2e394d;
    }

    .container {
        width: 300px;
        height: 220px;
        background: #e2cc9d;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-150px, -110px);
    }

    .container .inputBox {
        display: none;
    }

    .container .labelBox {
        width: 140px;
        height: 40px;
        background: silver;
        /* border: 1px solid brown; * /
        display: inline-block;
        border-radius: 50px;
        position: relative;
        cursor: pointer;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-70px, -20px);
    }

    .cat {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #ffffff;
        position: absolute;
        top: 3px;
        left: 3px;
    }

Copy the code

Results the following

Next, start drawing cats

It’s just two eyes, two ears and a mouth. Don’t use the nose. The beard is too hard to draw. Just so-so

Draw the ear

A left and a right, draw a rotation can see the line, not that pay attention to people.

Half of the ellipse with a border or an outer shadow, I use the outer shadow, depending on personal habits.

.leftEar {
        width: 15px;
        height: 15px;
        position: absolute;
        left: -6px;
        bottom: 70%;
        background: #218f8f;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        box-shadow: inset 4px 0 0 0px #ffffff, inset -4px 0 0 0px #ffffff;
        transform: rotate(-40deg);
        z-index: -1;
    }

    .rightEar {
        width: 15px;
        height: 15px;
        position: absolute;
        right: -6px;
        bottom: 70%;
        background: #218f8f;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        box-shadow: inset 4px 0 0 0px #ffffff, inset -4px 0 0 0px #ffffff;
        transform: rotate(60deg);
        z-index: -1;
    }
Copy the code

Draw the eye

Here I learn fine, direct shadow painting the other half of the eye, haha

    .eyes {
        position: absolute;
        width: 6px;
        height: 6px;
        background: # 222222;
        border-radius: 50%;
        transform: translate(8px.11px);
        box-shadow: 16px 0 0 # 222222;
    }
Copy the code

Draw your mouth

A similar semicircle, needless to say, at first I was going to draw a tongue, but I couldn’t get it out, never mind

    .mouth {
        width: 14px;
        height: 7px;
        position: absolute;
        left: 17px;
        bottom: 8px;
        background: # 222222;
        margin-left: -5px;
        border-radius: 2px 2px 20px 20px;
    }
Copy the code

Results the following

Festival!

Because I want to be a cat, let’s say a cat’s cat, and I’m going to click to get his wheels to the other side, and then I’m going to move my ears in this process, so I’m going to make my right ear oblique, and I’m going to make my mouth come out slowly, so I’m going to reduce my mouth to 0 first,


        transform: scale(0);

Copy the code

Then continue to add animation effects

/ / clickinputAfter the box1.5 s.labelThe frame slowly changes colorinput[type='checkBox']:checked + .labelBox{
        transition: 1.5 s ease;
        background-color: brown; } / / clickinputAfter the box1.5 sThe cat wheeled on the other sideinput[type='checkBox']:checked + .labelBox .cat {
        transform: rotate(360deg);
        /* transform: translate(95px); * /
        left: 95px;
        transition: 1.5 sease; } / / clickinputAfter the box1.5 sThe cat's mouth came out slowlyinput[type='checkBox']:checked + .labelBox .cat .mouth{
        transform: scale(1);
        transition: 1.5 sease; } / / clickinputAfter the box1.5 sThe cat's right ear changed from oblique to straightinput[type='checkBox']:checked + .labelBox .cat .rightEar{
        transform: rotate(40deg);
        transition: 1.5 s ease;
    }
Copy the code

Click effect: needs to be improved, haha