php微信实现红包雨,小程序中关于红包雨的实现

.flex {

display: -ms-flexbox;

display: flex

}

.flex-center {

display: -ms-flexbox;

display: flex;

-ms-flex-direction: column;

flex-direction: column;

-ms-flex-align: center;

align-items: center;

-ms-flex-pack: center;

justify-content: center;

width: 100%;

height: 100%

}

.flex-column {

display: -ms-flexbox;

display: flex;

-ms-flex-direction: column;

flex-direction: column

}

.flex-column-center {

display: -ms-flexbox;

display: flex;

-ms-flex-direction: column;

flex-direction: column;

-ms-flex-align: center;

align-items: center

}

.flex-column-sb {

display: -ms-flexbox;

display: flex;

-ms-flex-direction: column;

flex-direction: column;

-ms-flex-align: center;

align-items: center;

-ms-flex-pack: justify;

justify-content: space-between

}

.flex-column-c {

display: -ms-flexbox;

display: flex;

-ms-flex-direction: column;

flex-direction: column;

-ms-flex-align: center;

align-items: center;

-ms-flex-pack: center;

justify-content: center

}

.flex-row {

display: -ms-flexbox;

display: flex;

-ms-flex-align: center;

align-items: center

}

.flex-row-center {

display: -ms-flexbox;

display: flex;

-ms-flex-align: center;

align-items: center;

width: 100%

}

.flex-content-center {

display: -ms-flexbox;

display: flex;

-ms-flex-pack: center;

justify-content: center;

width: 100%

}

.flex-column-right {

display: -ms-flexbox;

display: flex;

-ms-flex-direction: column;

flex-direction: column;

-ms-flex-align: end;

align-items: flex-end

}

.flex-column-left {

display: -ms-flexbox;

display: flex;

-ms-flex-direction: column;

flex-direction: column;

-ms-flex-align: start;

align-items: flex-start

}

.flex-sb {

display: -ms-flexbox;

display: flex;

-ms-flex-align: center;

align-items: center;

-ms-flex-pack: justify;

justify-content: space-between

}

.flex-sa {

display: -ms-flexbox;

display: flex;

-ms-flex-align: center;

align-items: center;

-ms-flex-pack: distribute;

justify-content: space-around

}

.flex-c {

display: -ms-flexbox;

display: flex;

-ms-flex-align: center;

align-items: center;

-ms-flex-pack: center;

justify-content: center

}

.flex-sb-start {

display: -ms-flexbox;

display: flex;

-ms-flex-pack: justify;

justify-content: space-between

}

.flex-start {

display: -ms-flexbox;

display: flex;

-ms-flex-pack: start;

justify-content: flex-start

}

.flex-end {

display: -ms-flexbox;

display: flex;

-ms-flex-pack: end;

justify-content: flex-end

}

.flex-center-end {

display: -ms-flexbox;

display: flex;

-ms-flex-align: center;

align-items: center;

-ms-flex-pack: end;

justify-content: flex-end

}

.flex-end-center {

display: -ms-flexbox;

display: flex;

-ms-flex-align: end;

align-items: flex-end;

-ms-flex-pack: center;

justify-content: center

}

.flex-end-sb {

display: -ms-flexbox;

display: flex;

-ms-flex-align: end;

align-items: flex-end;

-ms-flex-pack: justify;

justify-content: space-between

}

.flex-end-start {

display: -ms-flexbox;

display: flex;

-ms-flex-align: end;

align-items: flex-end

}

.red-envelope-popup {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: 999;

/* background: rgba(0,0,0,.8) */

}

.red-envelope-popup .close-bg {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0

}

.red-envelope-popup .reminder-wrapper {

position: relative;

width: 750rpx;

height: 716rpx;

color: #fff;

box-sizing: border-box

}

.red-envelope-popup .reminder-wrapper .title {

font-size: 60rpx;

color: #fffdc5

}

.red-envelope-popup .reminder-wrapper .time {

margin-top: 100rpx;

font-size: 240rpx;

color: #fffdc5

}

.red-envelope-popup .rain-wrapper {

/* width: 100%; */

/* height: 100%; */

/* background-image: url(https://imgs.solui.cn/weapp/redBacketBG.jpg); */

/* background-size: 100% 100%; */

/* background-repeat: no-repeat */

}

.red-envelope-popup .rain-wrapper .time-info {

position: absolute;

top: 80rpx;

left: 45rpx;

font-size: 24rpx;

color: #fff

}

.red-envelope-popup .rain-wrapper .time-info .progress-wrapper {

position: relative;

height: 16rpx;

width: 240rpx;

margin-left: 20rpx;

margin-right: 20rpx;

border-radius: 16rpx;

background: #fff;

overflow: hidden

}

.red-envelope-popup .rain-wrapper .time-info .progress-wrapper .progress {

position: absolute;

top: 0;

left: 0;

bottom: 0;

width: 240rpx;

border-radius: 16rpx;

background: #fe2e00;

z-index: 1

}

.red-envelope-popup .rain-wrapper .time-info .total-score {

font-size: 40rpx

}

.red-envelope-popup .rain-wrapper .canvas-wrapper {

position: relative

}

.red-envelope-popup .rain-wrapper .canvas-wrapper .score-change {

position: absolute;

width: 50rpx;

height: 50rpx;

font-size: 40rpx;

color: #fffdc5;

opacity: 0

}

.red-envelope-popup .result-wrapper {

width: 100%;

height: 100%;

display: -ms-flexbox;

display: flex;

-ms-flex-pack: center;

justify-content: center

}

.red-envelope-popup .result-wrapper .group-content {

position: relative;

width: 550rpx;

height: 700rpx;

/* background-image: url(https://imgs.solui.cn/weapp/l-rain-gold@2x.png); */

background-image: url(http://hmspimg.afarsoft.com/static/crmmicroapp/res/shopImg/Demolition.png);

background-size: 100% 100%;

background-repeat: no-repeat

}

.red-envelope-popup .result-wrapper .group-content .result-title {

margin-top: 50rpx;

font-size: 40rpx;

color: #fff

}

.red-envelope-popup .result-wrapper .group-content .money-wrapper {

margin-top: 56rpx;

color: #fff

}

.red-envelope-popup .result-wrapper .group-content .money-wrapper .money {

font-size: 120rpx

}

.red-envelope-popup .result-wrapper .group-content .money-wrapper .unit {

position: relative;

top: 34rpx;

font-size: 32rpx

}

.red-envelope-popup .result-wrapper .group-content .result-btn {

margin-top: 158rpx;

width: 300rpx;

height: 70rpx;

background-color: #fff9e8;

text-align: center;

line-height: 70rpx;

border-radius: 40rpx;

font-size: 30rpx;

color: #b10000

}