PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

Home of the tiger

The Spring Festival of 2022 is still blocked by the epidemic. Some people can go home, while others have to stay in their workplaces. No matter what, we should do a good job in preventing the epidemic: wash our hands frequently, wear masks and get vaccinated.

Based on the epidemic and Spring Festival reasons to go home, made a cute tiger 🐅 home scene, after all, happy mood should be suggested on the basis of peace and health.

Scene: the material

Scene materials include: cute tiger, water droplets, masks, needles and homes.

Of the tiger

Ben was thinking about how to draw a tiger with CSS. Suddenly, he saw a cute tiger expression and felt quite fun. So he sketched it as follows:

Let’s prepare the HTML, where the tag with the class name mask refers to a mask, which will be discussed later.

<div class="tiger">
    <div class="text">The king</div>
    <div class="eye"></div>
    <div class="mouth"></div>
    <div class="tail"></div>
    <div class="mask"></div>
</div>
Copy the code

The tiger outline CSS is provided here. For details, see Codepen.io.

/ * * /
.tiger {
    width: var(--pw);
    height: var(--pw);
    background-color: #fff190;
    border-radius: 50% 50% 60% 60%;
    box-shadow: 0 0 0rem calc(var(--pw) / 80) #fff inset,
            0 calc(var(--pw) / 8) calc(var(--pw) / 16 * 3) calc(var(--pw) / 16)
                    #e48f28 inset,
            0 calc(var(--pw) / 8) 0rem calc(var(--pw) / 8) #fff inset;
    position: absolute;
    left: 5vw;
    top: 50vh;
}
Copy the code

Drops of water

The drop is a copy of two drops 💧 using border-radius deformation and box-shadow, consisting of a total of three drops, as follows:

For details, see codepen.io. The droplet code is as follows:

.droplet {
    margin-top: 50px;
    width: calc(var(--pw) * 0.25);
    height: calc(var(--pw) * 0.25);
    color: #23cdef;
    background-color: currentColor;
    border-radius: 90% 0 60% 40%/60% 0 90% 40%;
    transform: rotate(-45deg);
    box-shadow: calc(var(--pw) * 0.5) 0 0 currentColor,
            calc(var(--pw) * 0.5) calc(var(--pw) * 0.5) 0 currentColor;
    position: absolute;
z-index: -1;
    left: 15vw;
    top: 30vh;
}
Copy the code

facemask

The mask itself is realized by Linear-gradient, and two hanging ears are realized by pseudo-elements, as follows:

.mask {
    width: calc(var(--pw) * 0.75);
    height: calc(var(--pw) * 0.5);
    background-image: linear-gradient(to bottom, #23cdef 70%.#0b6f83);
    background-size: 100% calc(var(--pw) * 0.125);
    box-shadow: 0 0 calc(var(--pw) * 0.125) calc(var(--pw) * 0.0675) #fff
            inset;
    position: absolute;
z-index: -1;
    left: 30vw;
    top: 15vh;
}
.mask::before..mask::after {
    content: ' ';
    position: absolute;
    top: calc(var(--pw) * 0.05);
    width: calc(var(--pw) * 0.25);
    height: calc(var(--pw) * 0.35);
    box-sizing: border-box;
    border: calc(var(--pw) * 0.5 * 0.05) solid #fff;
    border-right: 0;
    border-radius: 50% 0 0 50%;
}
.mask::before {
    left: calc(var(--pw) * -0.25);
}
.mask::after {
    right: calc(var(--pw) * -0.25);
    transform: rotate(180deg);
}
Copy the code

The needle

.needle-tube {
    width: calc(var(--pw) * 0.5);
    height: calc(var(--pw) * 0.125);
    background-color: #c8d4df;
    box-shadow: calc(var(--pw) * -0.25) calc(var(--pw) * 0.0125) 0
            calc(var(--pw) * -0.05) #a7a3a5;
    position: relative;
z-index: -1;
    left: 60vw;
    top: 20vh;
    transform: rotate(-45deg);
}
.needle-tube::before {
    content: ' ';
    position: absolute;
    top: -10%;
    right: 0;
    width: calc(var(--pw) * 0.05);
    height: 120%;
    background-color: #bac4cd;
}
.needle-tube::after {
    content: ' ';
    position: absolute;
    width: 120%;
    height: 60%;
    top: 20%;
    background-image: linear-gradient(to right, # 526268 5%.#f3eded 10%);
}
Copy the code

home

Home scene please refer to this article: draw a home 🏘 gate scene, paste a Spring Festival couplet in advance – nuggets (juejin. Cn)

Add animation

The animations mainly include: tiger eye, tiger mouth, tiger mask, tiger moving track and the push and push of needle tube.

The opening and closing of tiger’s eye and mouth

Add the following animation to the eye and mouth elements to control the opening and closing of the tiger’s eyes and mouth. The maximum closing position is 30% of the current element. The code is as follows:

@keyframes _close {
    50% {
            height: calc(var(--h) * 0.3); }}Copy the code

The tiger face mask

In fact, the animation of the tiger wearing a mask should be consistent with the animation of a certain trajectory of the tiger. When passing the mask, the tiger will automatically put on the mask, as follows:

@keyframes _tigerMask{
    0%{
        opacity: 0;
    }
    30%{
        opacity: 0;
    }
    31%{
        opacity: 1;
    }
    100%{
        opacity: 1; }}Copy the code

Push out of needle tube

The pushing and launching animation of the needle tube is to control the moving distance of the needle tube for repeated operation.

.needle-tube::after {
    animation: _needleMove 5s linear infinite;
}
@keyframes _needleMove {
    50% {
        transform: translateX(70%); }}Copy the code

The movement of the tiger

The movement of the cute tiger is: first go through the washing process, then put on a mask, then fight the epidemic, and finally happy to go home.

@keyframes _tigerMove {
    0% {
            left: 5vw;
            top: 50vh;
    }
    10% {
            left: 15vw;
            top: 30vh;
    }
    30% {
            left: 30vw;
            top: 15vh;
    }
    40% {
            left: 60vw;
            top: 20vh;
    }
    55% {
            left: calc(100% - var(--pw) * 2);
            top: calc(100% - var(--pw) * 1.5);
    }
    70% {
            left: calc(100% - var(--pw) * 6);
            top: calc(100% - var(--pw) * 1.25);
    }
    95% {
            left: calc(100% - var(--pw) * 6);
            top: calc(100% - var(--pw) * 1.25);
    }
    100% {
            left: 5vw;
            top: 50vh; }}Copy the code

conclusion

Pw refers to the width of the tiger’s face, and all measurements are based on this variable, so when we change the value of this variable, everything else changes.

You can check the effect of cute tiger home (codepen. IO), really did not find how to directly convert the webpage animation GIF (check the first video and then convert GIF), XDM JMM understanding please leave a message.

For technology, we need to pay attention to a face of data transformation, or just understand it as a constant value (without paying attention to their direct scale relationship); For the rest, we just want to feel like we’re going home and hopefully bring you some joy.

Finally, did XDM JMM go home for the Spring Festival this year, or stay at work for the Spring Festival? No matter what the situation, I hope everyone is healthy and safe, I wish you a happy New Year in advance 🎉!