.bg { position: relative; width: 1280px; height: 645px; background: url("../images/bg2.jpg") repeat-y; background-size: 100% 100%; } .bg img { margin-right: 7px; } .bg2 { position: absolute; width: 1280px; height: 40px; background: url("../images/bg2.jpg") repeat-y; background-position: bottom; top: 645px; } .manNum { width: 425px; height: 155px; position: absolute; line-height: 155px; left: 195px; top: 36px; font-size: 155px; text-align: center; font-weight: 700; color: #FFFDFF; text-shadow: 0 0 18px #00e6de, 0 0 18px #00e6de; } .dayNum { position: absolute; width: 150px; height: 50px; left: 765px; top: 134px; font-size: 34px; color: #5EF872; line-height: 50px; } .monthNum { position: absolute; color: #5EF872; width: 150px; height: 50px; left: 1100px; top: 136px; font-size: 34px; line-height: 50px; } .member { position: absolute; top: 305px; left: 25px; width: 180px; height: 40px; line-height: 40px; font-size: 32px; color: #1F92D3; font-weight: 700; } .DAU { position: absolute; width: 180px; height: 35px; line-height: 35px; top: 307px; left: 286px; font-size: 32px; color: #1F92D3; font-weight: 700; } .PaidMan { position: absolute; width: 180px; height: 35px; line-height: 35px; font-size: 32px; color: #1F92D3; font-weight: 700; left: 512px; top: 304px; } .Recharge { position: absolute; top: 280px; left: 774px; width: 142px; height: 140px; } .Recharge P { color: #1F92D3; font-weight: 700; line-height: 45px; text-align: left; font-size: 32px; } .member-content { position: absolute; width: 150px; height: 100px; left: 123px; bottom: 122px; } .member-content p { line-height: 50px; font-size: 25px; color: #5EF872; margin-top: 15px; } .DAU-content { position: absolute; width: 150px; height: 100px; left: 390px; bottom: 132px; } .DAU-content p { line-height: 50px; font-size: 25px; color: #5EF872; margin-top: 19px; } .PaidMan-content { position: absolute; width: 150px; height: 100px; left: 650px; bottom: 138px; } .PaidMan-content p { line-height: 50px; font-size: 25px; color: #5EF872; margin-top: 19px; } .Recharge-content { position: absolute; width: 169px; height: 230px; right: 82px; bottom: 96px; } .Recharge-content ul { margin-bottom: 15px; } .Recharge-content ul li { color: #5EF872; font-size: 30px; } .RMB { margin-left: -5px; } .red-top { color: red !important; } .round1 { position: absolute; top: 372px; left: 48px; width: 237px; height: 239px; background: url(../images/round.png) no-repeat; -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; } .round2 { position: absolute; top: 372px; left: 306px; width: 237px; height: 239px; background: url(../images/round.png) no-repeat; -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; } .round3 { position: absolute; top: 372px; left: 572px; width: 237px; height: 239px; background: url(../images/round.png) no-repeat; -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; } .round4 { position: absolute; top: 273px; left: 901px; width: 340px; height: 340px; background: url(../images/round-big.png) no-repeat; -webkit-transform: rotate(360deg); animation: rotation 5s linear infinite; -moz-animation: rotation 5s linear infinite; -webkit-animation: rotation 5s linear infinite; -o-animation: rotation 5s linear infinite; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }