实现一个红包下落到指定位置的红包动效

【背景】如题，商业产品需求，需要实现一个优惠券隐藏后红包掉落到底部一个指定位置的红包动效

【设计思路】封装红包组件，设置动画效果，透明遮罩层打底

【核心样式】

红包样式

.redbag {
    position: absolute;
    height: 80px;// 红包大小
    width: 60px;
    background: url('~@/assets/redbag.png'); // 红包图片
    animation: redbag-flow .5s linear;
    animation-iteration-count: 6; // 我的动效执行6次，可自行调整
    opacity: 0;
    background-size: cover;
    &-second {
        position: absolute;
        height: 80px;
        width: 60px;
        background: url('~@/assets/redbag.png');
        background-size: cover;
        animation: redbag-flow .5s linear .3s;
        animation-iteration-count: 5; // 第二个比第一个少一次，防止动画有又开头的感觉
        opacity: 0;
    }
}

动画样式

css动画关键字，红包效果为从页面中部下落至页面底部，然后从大变小一些，渐隐
@keyframes redbag-flow {
    // 开始位置，我的设置为页面中部
    0% {
        bottom: 50%;
        right: 50%;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }

    // 防止出现的过为生硬
    40% {
        opacity: 0.5;
    }

    // 红包全出现时增加一个定位，使动画流畅，应为下落的底部和起点的中间位置，需要多衡量测试,确定坐标的值
    60% {
        bottom: 550px;
        right: 456px;
        opacity: 1;
        transform: scale(.5);
    }

    // 下落的底部位置
    100% {
        bottom: 300px;
        right: 406px;
        opacity: 0;
        transform: scale(.5);
    }
}

页面html中实现比较简单，设置两个红包即可，

<div class="outer-wrap">
     <div class="redbag"></div>
     <div class="redbag-second"></div>
</div>

可根据需要增加一个透明背景

.outer-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0; // 设置0层级，防止其他页面交互不可用
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0); // 设置透明背景
}

这样就可以实现红包斜着从页面中间掉落到底部的特效了