123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- .redPack {
- position: fixed;
- right: 30rpx;
- bottom: 180rpx;
- z-index: 99;
- width: 82rpx;
- height: 100rpx;
- transition: right 0.4s;
- }
- .slide-right {
- /* right: -75rpx; */
- transition: right 0.2s;
- }
- .redPack image {
- position: absolute;
- display: flex;
- animation: huang 1s ease-in-out 0s infinite;
- }
- @keyframes huang {
- from {
- transform: rotate(0);
- }
- 25% {
- transform: rotate(30deg);
- }
-
- 50% {
- transform: rotate(-30deg);
- }
- 75% {
- transform: rotate(0);
- }
- 80% {
- margin-top: -1rpx;
- }
- 85% {
- margin-top: 0;
- }
- }
- .redPack .bg1 {
- width: 150rpx;
- height: 145rpx;
- bottom: 0;
- left: 0;
- }
- .redPack .bg2 {
- width: 133rpx;
- height: 133rpx;
- left: 50%;
- margin-left: -66.5rpx;
- animation: heart 1.3s ease-in-out 0s infinite alternate;
- }
- .redPack .bg3 {
- width: 150rpx;
- height: 102rpx;
- bottom: 0;
- left: 0;
- }
- @keyframes heart {
- from {
- transform: translate(0, -5rpx);
- }
- to {
- transform: translate(0, 15rpx);
- }
- }
- .redPack .text {
- position: absolute;
- bottom: 15rpx;
- display: flex;
- justify-content: center;
- align-items: flex-end;
- width: 100%;
- font-size: 44rpx;
- line-height: 62rpx;
- font-weight: 600;
- color: #fff;
- white-space: nowrap;
- }
- .redPack .text text {
- font-size: 24rpx;
- font-weight: 400;
- line-height: 50rpx;
- padding-left: 6rpx;
- padding-bottom: 2rpx;
- }
- .icon__redpack {
- height: 100rpx;
- width: 82rpx;
- }
|