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

新春即临

🎉春节🍾即将到来，现在的你每年还能收到压岁钱吗？本着娱乐庆祝新春的想法，用css制作一个简易的压岁钱发射器，希望能给各位看官带了一丝的快乐。

材料

首先让我们准备一下原材料：发射器和金钱。

绘制

🐟娱乐新春压岁钱发射器完全是用CSS实现的（当前，HTML是不可缺少的）：

1. box-shadow 实现了伪3D的效果
2. text-shadow 实现了文字凸出的效果

必要的DOM

<div class="spit-money">
    <span>压岁钱</span>
    <div class="moeny">100</div>
</div>

压岁钱发射器

压岁钱发射器是由器身、手柄、手柄扣组成，代码实现如下：

器身

里面用到了var函数，如果阅读的时候感觉不方便，就把这些东西看成一个数字，因为它们计算后的本质也是我们常使用的px、rem等单位的值。

.spit-money {
    --h: 4rem;
    --s: calc(var(--h) * 0.5);
    --ts: calc(var(--s) * 0.02);
    --bc: #f10909;
    --bshadow: 0rem calc(var(--h) * 0.1) calc(var(--h) * 0.125) 0rem #9b060d,
            0rem calc(var(--h) * 0.25) calc(var(--h) * 0.125) 0rem #4c0a0d,
            0rem calc(var(--h) * 0.5) calc(var(--h) * 0.25) calc(var(--h) * 0.1)
                    rgb(0 0 0 / 20%);
    --tshadow: var(--ts) var(--ts) var(--ts) #000,
            calc(var(--ts) * -1) calc(var(--ts) * -1) var(--ts) #fff;
    width: calc(var(--h) * 3);
    position: relative;
    height: var(--h);
    line-height: var(--h);
    text-align: center;
    color: #f14444;
    font-size: var(--s);
    background-color: var(--bc);
    box-shadow: var(--bshadow);
    text-shadow: var(--tshadow);
    cursor: pointer;
}

手柄

.spit-money::before {
    content: '';
    position: absolute;
    width: calc(var(--h) * 0.5);
    height: calc(var(--h) * 1.25);
    background-color: var(--bc);
    top: var(--h);
    left: calc(var(--h) * 0.625);
    box-shadow: var(--bshadow);
    border-radius: 0 0 10% 10%;
}

手柄扣

此处用到了 border-radius 是手柄扣更加的圆润一点。

.spit-money::after {
    content: '';
    position: absolute;
    width: calc(var(--h) * 0.5);
    height: calc(var(--h) * 0.5);
    border-right: calc(var(--h) * 0.05) solid var(--bc);
    border-bottom: calc(var(--h) * 0.05) solid var(--bc);
    border-radius: 0 0 70% 0;
    box-shadow: calc(var(--h) * 0.02) calc(var(--h) * 0.08)
            calc(var(--h) * 0.05) 0 rgb(0 0 0 / 50%);
    top: var(--h);
    left: calc(var(--h) * 1.125);
    box-sizing: border-box;
}

金钱

金钱的制作就很简单了，仅仅是一个长方形加点数字。

.moeny {
    width: calc(var(--h) * 1.5);
    height: calc(var(--h) * 0.75);
    background-color: #ee446f;
    position: absolute;
    top: calc(var(--h) * 0.125);
    right: 0;
    color: #f5a826;
    line-height: calc(var(--h) * 0.75);
    text-align: center;
    box-shadow: calc(var(--h) * 0.02) calc(var(--h) * 0.08)
            calc(var(--h) * 0.05) 0 rgb(0 0 0 / 50%);
    opacity: 0;
}

动画

这里给了平滑的动画，如果想要其他复杂或者说炫酷的动画轨迹，需要特殊处理一下，就需要各位看官处理一下了。

.spit-money:hover .moeny {
    animation: _move 0.75s linear infinite;
}
@keyframes _move {
    0% {
            opacity: 0;
            transform: translateX(100%);
    }
    1% {
            opacity: 1;
            transform: translateX(100%);
    }
    50% {
            opacity: 1;
            transform: translateX(200%);
    }
    99% {
            opacity: 1;
            transform: translateX(200%);
    }
    100% {
            opacity: 0;
            transform: translateX(100%);
    }
}

效果

线上效果 (codepen.io)

总结

喜迎🎉春节🍾，生机盎然，红红火火，提前祝 XDM 新春快乐！

文中--h代表的是器身的高度，手柄、手柄扣等的尺寸都是根据它计算得到的，所以你可以通过改变--h的值来改变压岁钱发射器的大小。

希望此篇文章能给各位看官带来快乐或帮助，顺便问一下， XDM 过年还会收到压岁钱吗？多少无所谓，最重要的是过年的氛围与开心，我是现在只收到来自父母的压岁钱了！