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

大家都是成年人了，已经过了收红包的年纪，现在过年回家还要给家里的侄子侄女们发红包，想想都怀念当初双手插兜，有大人把红包硬塞进口袋的时候，真是美滋滋。本篇写一个领红包的css动画，话不多讲开撸。

红包设计

1、红包封面顶部弧度

如何做出红包封面上方的凹陷弧度？

用radial-gradient属性，上面一个透明外圆，1px黑线，其他部分红色。 上代码：

background: radial-gradient(
    circle at 50% -97%,
    transparent 0%,
    transparent 52%,
    #951d1a 52%,
    #951d1a calc(52% + 3px),
    #e94553 calc(52% + 3px),
    #e94553
);

2、云朵状封条和两只兔耳朵

将三个一大两小的圆叠放在一起，并用clip-path裁剪掉多余的部分：

左小圆裁剪掉右半边，右小圆裁剪掉左半边：

.inner::before {
    content: '';
    display: block;
    width: var(--small-r);
    height: var(--small-r);
    border-radius: 100%;
    border-top: none;
    border: 3px solid #951d1a;
    background-color: #e94553;
    position: absolute;
    left: calc(0px - (314px - var(--big-r)) / 2);
    top: calc(var(--small-r) / 2 - 20px);
    box-sizing: border-box;
    clip-path: polygon(
        0 0,
        calc(var(--small-r) / 2) 0,
        calc(var(--small-r) / 2) var(--small-r),
        0 var(--small-r)
    );
}
.inner::after {
    content: '';
    display: block;
    width: var(--small-r);
    height: var(--small-r);
    border-radius: 100%;
    border-top: none;
    border: 3px solid #951d1a;
    background-color: #e94553;
    position: absolute;
    right: calc(0px - (314px - var(--big-r)) / 2);
    top: calc(var(--small-r) / 2 - 20px);
    box-sizing: border-box;
    clip-path: polygon(
        calc(var(--small-r) / 2) 0,
        var(--small-r) 0,
        var(--small-r) var(--small-r),
        calc(var(--small-r) / 2) var(--small-r)
    );
}

兔耳朵用box-shadow绘制内耳，最后定位到云朵下方即可：

background-color: #f3b63f;
box-shadow: inset 6px -6px 0 0 #fcee6f,
    inset -6px -6px 0 0 #fcee6f;

3、红包内的money样式

money的宽度和高度和红包相同，因为文字是横的，所以要将文字旋转90度。

.money {
    width: var(--packet-w);
    height: var(--packet-h);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.money::before {
    content: '新春快乐鸭';
    display: block;
    width: var(--packet-h);
    height: var(--packet-w);
    background-color: #d0acb8;
    transform: rotate(90deg);
    position: absolute;
    left: calc((var(--packet-w) - var(--packet-h)) / 2);
    top: calc((var(--packet-h) - var(--packet-w)) / 2);
    font-size: calc(var(--packet-w) / 5);
    line-height: var(--packet-w);
    text-align: center;
    color: #9b304e;
    font-weight: bold;
}

4、动画设计

1. 兔耳朵来回摆动

设置动画方向animation-direction: alternate来回摆动：

.animate .ears::before {
    animation: rotate-ears-1 0.2s ease-in alternate 4;
}
.animate .ears::after {
    animation: rotate-ears-2 0.2s ease-in alternate 4;
}
@keyframes rotate-ears-1 {
    from {
        transform: rotate(15deg);
    }
    to {
        transform: rotate(35deg);
    }
}
@keyframes rotate-ears-2 {
    from {
        transform: rotate(-15deg);
    }
    to {
        transform: rotate(-35deg);
    }
}

2. 封条旋转

不用做3D旋转效果也还可以！

.animate .seal-wrapper {
    animation: rotate-seal 1s ease-in-out 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
@keyframes rotate-seal {
    from {
        transform: rotateX(0deg);
        z-index: 1;
    }
    to {
        transform: rotateX(180deg);
        z-index: 0;
    }
}

3、money飞出来

money从红包中划出后旋转2圈720度，然后放大2倍展示。

@keyframes get-money {
    0% {
        top: calc((var(--packet-h) - var(--packet-w)) / 2);
        transform: rotate(90deg) scale(1);
        z-index: 0;
    }
    50% {
        top: calc(
            (var(--packet-h) - var(--packet-w)) / 2 -
                var(--packet-h)
        );
        transform: rotate(90deg) scale(1);
        z-index: 0;
    }
    100% {
        top: calc((var(--packet-h) - var(--packet-w)) / 2);
        z-index: 2;
        transform: rotate(720deg) scale(2);
    }
}

Ending...谢谢观看