123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- page {
- /* background-color: #f1f0f0f0; */
- background-color:#ffffff;
- }
- .load {
- width: 100%;
- height: 2400rpx;
- position: absolute;
- left: 0;
- top: 0;
- z-index: 9999;
- background-color: #ffffff;
- text-align: center;
- line-height: 1300rpx;
- }
- .loadimg {
- width: 200rpx;
- height: 200rpx;
- }
- .imghead{
- width: 100%;
- height: 2145rpx;
- }
- .boxqrcode {
- width: 100%;
- height: 166rpx;
- position:absolute;
- left:0;
- top:1134rpx;
- display: flex;
- flex-direction:row;
- align-items:center;
- }
- .boxqrcoce {
- flex: 2;
- }
- .boxagain {
- flex: 4;
- }
- .boxsurprised {
- top:1310rpx;
- position:absolute;
- width: 86%;
- margin-left: 7%;
- margin-right: 7%;
- }
- .imgsurprised {
- width: 100%;
- height: 110rpx;
- }
- .imgqrcode {
- width: 140rpx;
- height: 140rpx;
- margin-left:70rpx;
- }
- .imgagain {
- width: 453rpx;
- height: 110rpx;
- margin-top:40rpx;
- }
- .boxscore {
- display: flex;
- flex-direction:row;
- top:90rpx;
- width: 39%;
- height: 100rpx;
- margin-right: 5%;
- margin-left:50%;
- position:absolute;
- justify-content:flex-end;
- }
- .score {
- color: #F50000;
- font-weight: 900;
- font-size: 92rpx;
- transform:rotate(14deg);
- }
- .scoredesc {
- color: #F50000;
- font-weight: 500;
- font-size: 46rpx;
- line-height:188rpx;
- transform:rotate(10deg);
- margin-left:5rpx;
- }
- .tips {
- width: 100%;
- height: 58rpx;
- position: absolute;
- background-color:rgba(10, 10, 10, 0.5);
- left:0;
- top: 0;
- color: #E6E6FA;
- font-weight: 400;
- font-size: 30rpx;
- text-align: center;
- line-height: 58rpx;
- }
- @-webkit-keyframes bounce-down {
- 25% {-webkit-transform: translateY(-10px);}
- 50%, 100% {-webkit-transform: translateY(0);}
- 75% {-webkit-transform: translateY(10px);}
- }
- @keyframes bounce-down {
- 25% {transform: translateY(-10px);}
- 50%, 100% {transform: translateY(0);}
- 75% {transform: translateY(10px);}
- }
- .animate-bounce-down{
- width: 100%;
- height: 110rpx;
- -webkit-animation: bounce-down 1.2s linear infinite;
- animation: bounce-down 1.2s linear infinite;
- }
- @-webkit-keyframes bounce-up {
- 25% {-webkit-transform: translateY(10px);}
- 50%, 100% {-webkit-transform: translateY(0);}
- 75% {-webkit-transform: translateY(-10px);}
- }
- @keyframes bounce-up {
- 25% {transform: translateY(10px);}
- 50%, 100% {transform: translateY(0);}
- 75% {transform: translateY(-10px);}
- }
- .animate-bounce-up{
- background:#ddd;
- width: 100px;
- height: 100px;
- margin:100px auto;
- -webkit-animation: bounce-up 1.4s linear infinite;
- animation: bounce-up 1.4s linear infinite;
- }
|