PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

萌虎归家

2022的春节依旧被疫情阻挡着，有的人可以回家，有的人不得不留在工作地过年，但无论怎样，我们都要做好疫情防护：勤洗手、戴口罩、打疫苗（各位看官根据个人选择打或者不打，也笑已打完第三针加强针）。

基于疫情和春节回家的原因，做了一个萌虎🐅回家的场景，毕竟开心的心情都要建议在平安健康的基础上。

场景材料

场景材料有：萌虎、水滴、口罩、针管、家。

萌虎

本想着怎么用CSS画老虎，突然看到一个萌虎表情，感觉挺好玩的，就大概的描绘了一下，如下：

让我们来准备一下HTML，里面类名为mask的标签是指口罩，后面会提到。

<div class="tiger">
    <div class="text">王</div>
    <div class="eye"></div>
    <div class="mouth"></div>
    <div class="tail"></div>
    <div class="mask"></div>
</div>

这里主要提供了老虎的轮廓CSS，详情请看萌虎回家 (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;
}

水滴

水滴是使用border-radius变形，box-shadow复制两个水滴💧，总共三滴水滴组成，如下：

至于上面的文字，是通过伪元素实现的，详情请看萌虎回家 (codepen.io)，水滴代码如下：

.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;
}

口罩

口罩是使用linear-gradient实现口罩自身，再加上伪元素实现两个挂耳，如下：

.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);
}

针管

.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%);
}

家

家的场景请参考这篇文章：画一个家里🏘大门的场景，提前贴个春联 - 掘金 (juejin.cn)

添加动画

动画主要有：虎眼、虎口、虎带口罩、虎的移动轨迹以及针管的推进推出。

虎眼、虎口的开闭

在眼睛和嘴巴的元素上加上下面动画，来控制老虎眼睛和嘴巴的开闭，最大闭合位置为当前元素的30%处，代码如下:

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

虎带口罩

虎带口罩的动画，其实要和虎的一定轨迹动画的时间保持一致，当经过口罩的时候，萌虎自动带上口罩，如下：

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

针管的推进推出

针管的推进推出动画就是控制针管的移动距离，进行重复操作。

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

虎的移动轨迹

萌虎的移动轨迹为：先经过洗过过程，再戴上口罩，然后打个疫情，最后开开心心的回家。

@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;
    }
}

总结

文章的 --pw 是指萌虎脸的宽度，里面所有的尺寸计算都是根据这个变量来的，所以当我们改变这个变量的值的时候，其他元素都会发生改变。

效果可查看萌虎回家 (codepen.io)，实在没找到网页动画怎么直接转gif（查到的是先录视频再转gif），有了解的XDM JMM请您留言嘞。

对于技术而言，我们需要注意一脸的数据变换，或者仅仅把它理解为一直值（不用关注它们直接的比例关系）；对于其他而言，我们就体会一下回家的心情，希望能给你带来一份快乐。

最后问一句，XDM JMM 今年是回家过年，还是留在工作地过年了？无论什么情况，都希望大家都健康平安，提前祝大家新春快乐🎉！

🐅虎年到，春节到，😵萌虎就要回家了