红包效果实现

效果(网络问题上传不了gif动态图片)

CSS

.zh-chb-main{position: relative;margin: 0.3rem 0.3rem 0;}
.zh-chb-main .zh-center{position: absolute;z-index: 2;left: 50%; top: 1.2rem;width: 3.6rem;height: 2.4rem;margin-left: -1.8rem;font-size: 0.3rem;color: #fff;text-align: center;}
.zh-chb-main .zh-center p{padding: 0.7rem 0 0.3rem;}
.zh-chb-main .zh-center ul{display: inline-block;}
.zh-chb-main .zh-center ul li{float: left;width: 0.8rem;height: 0.8rem;margin-left: -1px;border: 1px solid #FCCE01;font-size: 0.5rem;color: #FCCE01;text-align: center;line-height: 0.8rem;}
.zh-chb-main .zh-awards-list{position: relative;width: 6.75rem;height: 5.4rem;margin: 0 auto;}
.zh-chb-main .zh-awards-list li{position: absolute;width: 1.35rem;height: 1.35rem;background-color: #F7C29F;box-shadow: 0 0 0 1px #fff;}
.zh-chb-main .zh-awards-list .active:before{content: "";display: block;position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%;border: 2px solid #f00;box-sizing: border-box;}
.zh-chb-main .zh-awards-list .zh-hb{width: 1.15rem;height: 1.15rem;margin: 0.1rem 0 0 0.1rem;border-radius: 10px;background-color: #CE1012;}
.zh-chb-main .zh-awards-list li:nth-of-type(1){left: 0;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(2){left: 1.35rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(3){left: 2.7rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(4){left: 4.05rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(5){left: 5.4rem;top: 0;}
.zh-chb-main .zh-awards-list li:nth-of-type(6){left: 5.4rem;top: 1.35rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(7){left: 5.4rem;top: 2.7rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(8){left: 5.4rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(9){left: 4.05rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(10){left: 2.7rem;top: 4.05rem;}
.zh-chb-main .zh-awards-list li:nth-of-type(1