|
- @charset "utf-8";
- body {
- background: #99081c;
- }
- #wrap {
- margin-top: -0.01333333rem;
- background-image: url("../image/bg.png");
- }
- /*三个不同的动画效果*/
- .caidai1,
- .caidai2,
- .caidai3 {
- opacity: 1;
- position: absolute;
- left: 0.53333333rem;
- top: 3.2rem;
- width: 1.02666667rem;
- height: 0.98666667rem;
- background-image: url("../image/hongbao1.png");
- -o-animation: caidai1 1s ease-in-out infinite;
- -ms-animation: caidai1 1s ease-in-out infinite;
- -moz-animation: caidai1 1s ease-in-out infinite;
- -webkit-animation: caidai1 1s ease-in-out infinite;
- animation: caidai1 1s ease-in-out infinite;
- }
- @keyframes caidai1 {
- 100% {
- opacity: 0;
- left: 1.86666667rem;
- top: 4.53333333rem;
- }
- }
- .caidai2 {
- left: 8rem;
- top: 1.86666667rem;
- width: 1.26666667rem;
- height: 1.06666667rem;
- background-image: url("../image/hongbao2.png");
- -o-animation: caidai2 1s ease-in-out infinite;
- -ms-animation: caidai2 1s ease-in-out infinite;
- -moz-animation: caidai2 1s ease-in-out infinite;
- -webkit-animation: caidai2 1s ease-in-out infinite;
- animation: caidai2 1s ease-in-out infinite;
- }
- @keyframes caidai2 {
- 100% {
- opacity: 0;
- left: 6.66666667rem;
- top: 3.2rem;
- }
- }
- .caidai3 {
- left: 0;
- top: 11.46666667rem;
- width: 1.30666667rem;
- height: 1.17333333rem;
- background-image: url("../image/gold.png");
- -o-animation: caidai3 0.5s ease-in-out infinite alternate;
- -ms-animation: caidai3 0.5s ease-in-out infinite alternate;
- -moz-animation: caidai3 0.5s ease-in-out infinite alternate;
- -webkit-animation: caidai3 0.5s ease-in-out infinite alternate;
- animation: caidai3 0.5s ease-in-out infinite alternate;
- }
- @keyframes caidai3 {
- 100% {
- top: 12rem;
- }
- }
- /*主体*/
- .box {
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 10.53333333rem;
- }
- .rule,
- .my {
- margin-top: 0.48rem;
- width: 1.09333333rem;
- height: 0.74666667rem;
- background-color: #ff9d1b;
- text-align: center;
- line-height: 0.74666667rem;
- font-size: 0.32rem;
- color: #fff;
- }
- .rule {
- border-top-right-radius: 0.13333333rem;
- border-bottom-right-radius: 0.13333333rem;
- }
- .my {
- position: absolute;
- right: 0;
- top: 0.56rem;
- width: 1.17333333rem;
- min-width: 1.6rem;
- background-color: #fdc434;
- line-height: 0.64666667rem;
- font-size: 0.24rem;
- text-align: center;
- color: #fff;
- border-radius: 3px 0 0 3px;
- }
- #myWin{
- position: absolute;
- top: 0;
- right: 0;
- background-color: #fe5362;
- border-top-left-radius: 0.13333333rem;
- border-bottom-left-radius: 0.13333333rem;
- margin-top: 0.48rem;
- width: 1.09333333rem;
- height: 0.74666667rem;
- text-align: center;
- line-height: 0.74666667rem;
- font-size: 0.32rem;
- color: #fff;
- }
- #share{
- position: absolute;
- top: 1.2rem;
- right: 0;
- background-color: #34b202;
- border-top-left-radius: 0.13333333rem;
- border-bottom-left-radius: 0.13333333rem;
- margin-top: 0.48rem;
- width: 1.09333333rem;
- height: 0.64666667rem;
- text-align: center;
- line-height: 0.64666667rem;
- font-size: 0.32rem;
- color: #fff;
- z-index: 10;
- }
- /*刮刮乐图层*/
- .panel {
- position: absolute;
- left: 50%;
- top: 1.8rem;
- z-index: 1;
- margin-left: -4rem;
- width: 8rem;
- height: 4.66666667rem;
- background-image: url("../image/panel.png");
- }
- #canvas {
- position: absolute;
- left: 50%;
- top: 50%;
- margin: -2.05333333rem 0 0 -3.74666667rem;
- }
- #canvas-mask {
- position: absolute;
- left: 50%;
- top: 50%;
- z-index: 1;
- width: 7.49333333rem;
- height: 4.10666667rem;
- margin: -2.05333333rem 0 0 -3.74666667rem;
- }
- #canvas-mask #btn {
- position: absolute;
- left: 50%;
- top: 50%;
- margin: -0.33333333rem 0 0 -1.28rem;
- width: 2.56rem;
- height: 0.66666667rem;
- background-image: url("../image/start.png");
- }
- #canvas-mask p {
- margin-top: 3.04rem;
- height: 0.29333333rem;
- text-align: center;
- line-height: 0.29333333rem;
- font-size: 0.29333333rem;
- color: #fff;
- }
- /*奖品展示*/
- .awards {
- bottom: 0.32rem;
- margin-left: -4.66666667rem;
- width: 9.33333333rem;
- height: 2.33333333rem;
- background-color: #ee3c3a;
- border-radius: 0.26666667rem;
- }
- .awards .swiper-slide {
- margin: 0.26666667rem 0.4rem 0;
- }
- /*规则背景色*/
- #mask-rule .box-rule {
- background-color: #fe5c51;
- }
- #mask-rule .box-rule .star {
- background-image: url("../../common/image/rule/star2.png");
- }
|