「兔了个兔」创意投稿大赛——兔禧福

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

开篇

有了春联，怎么能没有福字呢，本篇将围绕卯兔送福展开，同时，感谢阿里妈妈矢量库提供的插画。

按照习惯，首先放一下效果图吧，

源码可调，在码上掘金

实现思路

首先是文字居中，之后旋转15度，-webkit-text-stroke这个属性实现边框样式。利用伪类实现上下两部分文字，clip-path实现文字展示一半。之后是设置文字的底板样式，主要是利用阴影，先叠层白的阴影，再在白的后面叠层黑的阴影，这样一来，白的地方发亮，黑的地方暗，形成内陷效果。最后用动画实现折叠抬起的样子。

然后是福字掉落的实现，先创建了几个福字，设置不同的大小。之后设置动画和对应的延迟，动画就是从上到下董事左移一下，透明度改变一下。循环起来就成了福字雨的效果。

实现

HTML部分

结合上述思路

<div class="kuang">
    <div class="bubble"><img src="xx" style="height: 100%; width: 100%;" alt=""></div>
    <div class="bubble"><img src="xx" style="height: 100%; width: 100%;" alt=""></div>
    <div class="bubble"><img src="xx" style="height: 100%; width: 100%;" alt=""></div>
    ……
    <div class="bubble"><img src="xx" style="height: 100%; width: 100%;" alt=""></div>
</div>
<h1>兔禧福</h1>

css部分

中间文字对应的部分重要样式

h1::before{
             content: '兔禧福';
             color: rgb(255, 255, 255);
             position: absolute;
             top: 0;
             left: 0;
             clip-path: inset(0 0 50% 0);
             transition: all 1s;
         }
         h1:hover::before{
           transform: rotateX(-30deg) skew(-15deg); 
           text-shadow: 0 0 1px black;
         }

对应的就是设置文字部分显示以及hover之后旋转角度和倾斜角度以及文字阴影。

福字雨

@keyframes rain {
            0%{
                transform: translateX(0px);
                bottom: 100%;
                opacity: 0;
            }
            50%{
                transform: translateX(100px);
                opacity: 0.5;
            }
            100%{
                transform: translateX(0);
                bottom: -100px;
                opacity: 1;
            }
        }

福字雨的动画就是这个，从上到下，同时让福字左右移动并且由透明之间实体起来。

最后

这就是本文兔禧福的实现过程了。

我也同步在码上掘金上发布了这个代码，喜欢的话可以去看看。兔了个兔（三） - 码上掘金 (juejin.cn)

最后，一个小请求，麻烦各位看官动动手指点个赞吧！！！