css3 红包出现 消失动画

CSS3可以实现许多动画效果，其中包括红包出现和消失的动画效果。下面我们来看一下如何通过CSS3实现红包的出现和消失动画效果。

.redpacket {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 50%;
    animation: redpacket-animation 1s forwards;
}
@keyframes redpacket-animation {
0% {
    opacity: 0;
    transform: translateY(0);
}
50% {
    opacity: 1;
    transform: translateY(-50px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}
.hidden {
    opacity: 0;
    visibility: hidden;
}
    

首先，我们定义一个名为redpacket的类，该类持有红包的出现动画效果。我们使用CSS中的animation属性来启动该动画，动画名为redpacket-animation，动画需要运行1秒钟。启用animation属性后，我们还需要定义@keyframes来描述动画的具体效果。

在@keyframes中，我们将动画细分为三个阶段：0%、50%和100%。其中，0%的样式表示红包默认状态，即初始状态。50%的样式表示红包从0%状态到100%状态的过渡效果，从而实现红包的向上漂浮。100%的样式表示红包回到初始状态的效果。

接下来，我们还可以定义一个名为hidden的类，该类用于控制红包的消失动画效果。我们使用opacity属性来控制红包的透明度，在动画结束后将其设置为0即可。同时，我们还将visibility设置为hidden，以确保红包在消失后不再显示。

通过以上CSS代码，我们就可以实现红包出现和消失的动画效果了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！