@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"); }