Alibaba Cloud 1218 dynamic css3 code_html/css_WEB-ITnose

See the Pen jEWpWm by kujian (@kujian) on CodePen.

   1 .room-nav {   2     /* -webkit-animation:roomNavTranslate3d 2s linear infinite; */   3     -moz-animation: roomNavTranslate3d 2s linear infinite;   4     -ms-animation: roomNavTranslate3d 2s linear infinite;   5     -o-animation: roomNavTranslate3d 2s linear infinite;   6     animation: roomNavTranslate3d 2s linear infinite   7 }   8    9 @-webkit-keyframes roomNavTranslate3d {  10     0% {  11         -webkit-transform: translate3d(0,0,0);  12         -moz-transform: translate3d(0,0,0);  13         -ms-transform: translate3d(0,0,0);  14         -o-transform: translate3d(0,0,0);  15         transform: translate3d(0,0,0)  16     }  17   18     50% {  19         -webkit-transform: translate3d(0,15px,15px);  20         -moz-transform: translate3d(0,15px,15px);  21         -ms-transform: translate3d(0,15px,15px);  22         -o-transform: translate3d(0,15px,15px);  23         transform: translate3d(0,15px,15px)  24     }  25   26     100% {  27         -webkit-transform: translate3d(0,0,0);  28         -moz-transform: translate3d(0,0,0);  29         -ms-transform: translate3d(0,0,0);  30         -o-transform: translate3d(0,0,0);  31         transform: translate3d(0,0,0)  32     }  33 }  34   35 @-moz-keyframes roomNavTranslate3d {  36     0% {  37         -webkit-transform: translate3d(0,0,0);  38         -moz-transform: translate3d(0,0,0);  39         -ms-transform: translate3d(0,0,0);  40         -o-transform: translate3d(0,0,0);  41         transform: translate3d(0,0,0)  42     }  43   44     50% {  45         -webkit-transform: translate3d(0,15px,15px);  46         -moz-transform: translate3d(0,15px,15px);  47         -ms-transform: translate3d(0,15px,15px);  48         -o-transform: translate3d(0,15px,15px);  49         transform: translate3d(0,15px,15px)  50     }  51   52     100% {  53         -webkit-transform: translate3d(0,0,0);  54         -moz-transform: translate3d(0,0,0);  55         -ms-transform: translate3d(0,0,0);  56         -o-transform: translate3d(0,0,0);  57         transform: translate3d(0,0,0)  58     }  59 }  60   61 @-ms-keyframes roomNavTranslate3d {  62     0% {  63         -webkit-transform: translate3d(0,0,0);  64         -moz-transform: translate3d(0,0,0);  65         -ms-transform: translate3d(0,0,0);  66         -o-transform: translate3d(0,0,0);  67         transform: translate3d(0,0,0)  68     }  69   70     50% {  71         -webkit-transform: translate3d(0,15px,15px);  72         -moz-transform: translate3d(0,15px,15px);  73         -ms-transform: translate3d(0,15px,15px);  74         -o-transform: translate3d(0,15px,15px);  75         transform: translate3d(0,15px,15px)  76     }  77   78     100% {  79         -webkit-transform: translate3d(0,0,0);  80         -moz-transform: translate3d(0,0,0);  81         -ms-transform: translate3d(0,0,0);  82         -o-transform: translate3d(0,0,0);  83         transform: translate3d(0,0,0)  84     }  85 }  86   87 @-o-keyframes roomNavTranslate3d {  88     0% {  89         -webkit-transform: translate3d(0,0,0);  90         -moz-transform: translate3d(0,0,0);  91         -ms-transform: translate3d(0,0,0);  92         -o-transform: translate3d(0,0,0);  93         transform: translate3d(0,0,0)  94     }  95   96     50% {  97         -webkit-transform: translate3d(0,15px,15px);  98         -moz-transform: translate3d(0,15px,15px);  99         -ms-transform: translate3d(0,15px,15px); 100         -o-transform: translate3d(0,15px,15px); 101         transform: translate3d(0,15px,15px) 102     } 103  104     100% { 105         -webkit-transform: translate3d(0,0,0); 106         -moz-transform: translate3d(0,0,0); 107         -ms-transform: translate3d(0,0,0); 108         -o-transform: translate3d(0,0,0); 109         transform: translate3d(0,0,0) 110     } 111 } 112  113 @keyframes roomNavTranslate3d { 114     0% { 115         -webkit-transform: translate3d(0,0,0); 116         -moz-transform: translate3d(0,0,0); 117         -ms-transform: translate3d(0,0,0); 118         -o-transform: translate3d(0,0,0); 119         transform: translate3d(0,0,0) 120     } 121  122     50% { 123         -webkit-transform: translate3d(0,15px,15px); 124         -moz-transform: translate3d(0,15px,15px); 125         -ms-transform: translate3d(0,15px,15px); 126         -o-transform: translate3d(0,15px,15px); 127         transform: translate3d(0,15px,15px) 128     } 129  130     100% { 131         -webkit-transform: translate3d(0,0,0); 132         -moz-transform: translate3d(0,0,0); 133         -ms-transform: translate3d(0,0,0); 134         -o-transform: translate3d(0,0,0); 135         transform: translate3d(0,0,0) 136     } 137 } 138  139 .nav-cloud { 140     -webkit-animation: navCloundTranslate3d 1.5s linear infinite; 141     -moz-animation: navCloundTranslate3d 1.5s linear infinite; 142     -ms-animation: navCloundTranslate3d 1.5s linear infinite; 143     -o-animation: navCloundTranslate3d 1.5s linear infinite; 144     animation: navCloundTranslate3d 1.5s linear infinite 145 } 146  147 @-webkit-keyframes navCloundTranslate3d { 148     0% { 149         -webkit-transform: translate3d(0,0,0); 150         -moz-transform: translate3d(0,0,0); 151         -ms-transform: translate3d(0,0,0); 152         -o-transform: translate3d(0,0,0); 153         transform: translate3d(0,0,0) 154     } 155  156     50% { 157         -webkit-transform: translate3d(0,15px,15px); 158         -moz-transform: translate3d(0,15px,15px); 159         -ms-transform: translate3d(0,15px,15px); 160         -o-transform: translate3d(0,15px,15px); 161         transform: translate3d(0,15px,15px) 162     } 163  164     100% { 165         -webkit-transform: translate3d(0,0,0); 166         -moz-transform: translate3d(0,0,0); 167         -ms-transform: translate3d(0,0,0); 168         -o-transform: translate3d(0,0,0); 169         transform: translate3d(0,0,0) 170     } 171 } 172  173 @-moz-keyframes navCloundTranslate3d { 174     0% { 175         -webkit-transform: translate3d(0,0,0); 176         -moz-transform: translate3d(0,0,0); 177         -ms-transform: translate3d(0,0,0); 178         -o-transform: translate3d(0,0,0); 179         transform: translate3d(0,0,0) 180     } 181  182     50% { 183         -webkit-transform: translate3d(0,15px,15px); 184         -moz-transform: translate3d(0,15px,15px); 185         -ms-transform: translate3d(0,15px,15px); 186         -o-transform: translate3d(0,15px,15px); 187         transform: translate3d(0,15px,15px) 188     } 189  190     100% { 191         -webkit-transform: translate3d(0,0,0); 192         -moz-transform: translate3d(0,0,0); 193         -ms-transform: translate3d(0,0,0); 194         -o-transform: translate3d(0,0,0); 195         transform: translate3d(0,0,0) 196     } 197 } 198  199 @-ms-keyframes navCloundTranslate3d { 200     0% { 201         -webkit-transform: translate3d(0,0,0); 202         -moz-transform: translate3d(0,0,0); 203         -ms-transform: translate3d(0,0,0); 204         -o-transform: translate3d(0,0,0); 205         transform: translate3d(0,0,0) 206     } 207  208     50% { 209         -webkit-transform: translate3d(0,15px,15px); 210         -moz-transform: translate3d(0,15px,15px); 211         -ms-transform: translate3d(0,15px,15px); 212         -o-transform: translate3d(0,15px,15px); 213         transform: translate3d(0,15px,15px) 214     } 215  216     100% { 217         -webkit-transform: translate3d(0,0,0); 218         -moz-transform: translate3d(0,0,0); 219         -ms-transform: translate3d(0,0,0); 220         -o-transform: translate3d(0,0,0); 221         transform: translate3d(0,0,0) 222     } 223 } 224  225 @-o-keyframes navCloundTranslate3d { 226     0% { 227         -webkit-transform: translate3d(0,0,0); 228         -moz-transform: translate3d(0,0,0); 229         -ms-transform: translate3d(0,0,0); 230         -o-transform: translate3d(0,0,0); 231         transform: translate3d(0,0,0) 232     } 233  234     50% { 235         -webkit-transform: translate3d(0,15px,15px); 236         -moz-transform: translate3d(0,15px,15px); 237         -ms-transform: translate3d(0,15px,15px); 238         -o-transform: translate3d(0,15px,15px); 239         transform: translate3d(0,15px,15px) 240     } 241  242     100% { 243         -webkit-transform: translate3d(0,0,0); 244         -moz-transform: translate3d(0,0,0); 245         -ms-transform: translate3d(0,0,0); 246         -o-transform: translate3d(0,0,0); 247         transform: translate3d(0,0,0) 248     } 249 } 250  251 @keyframes navCloundTranslate3d { 252     0% { 253         -webkit-transform: translate3d(0,0,0); 254         -moz-transform: translate3d(0,0,0); 255         -ms-transform: translate3d(0,0,0); 256         -o-transform: translate3d(0,0,0); 257         transform: translate3d(0,0,0) 258     } 259  260     50% { 261         -webkit-transform: translate3d(0,15px,15px); 262         -moz-transform: translate3d(0,15px,15px); 263         -ms-transform: translate3d(0,15px,15px); 264         -o-transform: translate3d(0,15px,15px); 265         transform: translate3d(0,15px,15px) 266     } 267  268     100% { 269         -webkit-transform: translate3d(0,0,0); 270         -moz-transform: translate3d(0,0,0); 271         -ms-transform: translate3d(0,0,0); 272         -o-transform: translate3d(0,0,0); 273         transform: translate3d(0,0,0) 274     } 275 } 276  277 .nav-cloud-bg-float1 { 278     -webkit-animation: cloudBgFloatScale2 2s ease infinite; 279     -moz-animation: cloudBgFloatScale2 2s ease infinite; 280     -ms-animation: cloudBgFloatScale2 2s ease infinite; 281     -o-animation: cloudBgFloatScale2 2s ease infinite; 282     animation: cloudBgFloatScale2 2s ease infinite 283 } 284  285 .nav-cloud-bg-float2 { 286     -webkit-animation: cloudBgFloatScale2 2s ease infinite .7s; 287     -moz-animation: cloudBgFloatScale2 2s ease infinite .7s; 288     -ms-animation: cloudBgFloatScale2 2s ease infinite .7s; 289     -o-animation: cloudBgFloatScale2 2s ease infinite .7s; 290     animation: cloudBgFloatScale2 2s ease infinite .7s 291 } 292  293 @-webkit-keyframes cloudBgFloatScale1 { 294     0% { 295         -webkit-transform: scale(1,1); 296         -moz-transform: scale(1,1); 297         -ms-transform: scale(1,1); 298         -o-transform: scale(1,1); 299         transform: scale(1,1); 300         filter: alpha(opacity=1); 301         -webkit-opacity: 1; 302         -khtml-opacity: 1; 303         -moz-opacity: 1; 304         -ms-opacity: 1; 305         -o-opacity: 1; 306         opacity: 1 307     } 308  309     100% { 310         -webkit-transform: scale(2,2); 311         -moz-transform: scale(2,2); 312         -ms-transform: scale(2,2); 313         -o-transform: scale(2,2); 314         transform: scale(2,2); 315         filter: alpha(opacity=0); 316         -webkit-opacity: 0; 317         -khtml-opacity: 0; 318         -moz-opacity: 0; 319         -ms-opacity: 0; 320         -o-opacity: 0; 321         opacity: 0 322     } 323 } 324  325 @-moz-keyframes cloudBgFloatScale1 { 326     0% { 327         -webkit-transform: scale(1,1); 328         -moz-transform: scale(1,1); 329         -ms-transform: scale(1,1); 330         -o-transform: scale(1,1); 331         transform: scale(1,1); 332         filter: alpha(opacity=1); 333         -webkit-opacity: 1; 334         -khtml-opacity: 1; 335         -moz-opacity: 1; 336         -ms-opacity: 1; 337         -o-opacity: 1; 338         opacity: 1 339     } 340  341     100% { 342         -webkit-transform: scale(2,2); 343         -moz-transform: scale(2,2); 344         -ms-transform: scale(2,2); 345         -o-transform: scale(2,2); 346         transform: scale(2,2); 347         filter: alpha(opacity=0); 348         -webkit-opacity: 0; 349         -khtml-opacity: 0; 350         -moz-opacity: 0; 351         -ms-opacity: 0; 352         -o-opacity: 0; 353         opacity: 0 354     } 355 } 356  357 @-ms-keyframes cloudBgFloatScale1 { 358     0% { 359         -webkit-transform: scale(1,1); 360         -moz-transform: scale(1,1); 361         -ms-transform: scale(1,1); 362         -o-transform: scale(1,1); 363         transform: scale(1,1); 364         filter: alpha(opacity=1); 365         -webkit-opacity: 1; 366         -khtml-opacity: 1; 367         -moz-opacity: 1; 368         -ms-opacity: 1; 369         -o-opacity: 1; 370         opacity: 1 371     } 372  373     100% { 374         -webkit-transform: scale(2,2); 375         -moz-transform: scale(2,2); 376         -ms-transform: scale(2,2); 377         -o-transform: scale(2,2); 378         transform: scale(2,2); 379         filter: alpha(opacity=0); 380         -webkit-opacity: 0; 381         -khtml-opacity: 0; 382         -moz-opacity: 0; 383         -ms-opacity: 0; 384         -o-opacity: 0; 385         opacity: 0 386     } 387 } 388  389 @-o-keyframes cloudBgFloatScale1 { 390     0% { 391         -webkit-transform: scale(1,1); 392         -moz-transform: scale(1,1); 393         -ms-transform: scale(1,1); 394         -o-transform: scale(1,1); 395         transform: scale(1,1); 396         filter: alpha(opacity=1); 397         -webkit-opacity: 1; 398         -khtml-opacity: 1; 399         -moz-opacity: 1; 400         -ms-opacity: 1; 401         -o-opacity: 1; 402         opacity: 1 403     } 404  405     100% { 406         -webkit-transform: scale(2,2); 407         -moz-transform: scale(2,2); 408         -ms-transform: scale(2,2); 409         -o-transform: scale(2,2); 410         transform: scale(2,2); 411         filter: alpha(opacity=0); 412         -webkit-opacity: 0; 413         -khtml-opacity: 0; 414         -moz-opacity: 0; 415         -ms-opacity: 0; 416         -o-opacity: 0; 417         opacity: 0 418     } 419 } 420  421 @keyframes cloudBgFloatScale1 { 422     0% { 423         -webkit-transform: scale(1,1); 424         -moz-transform: scale(1,1); 425         -ms-transform: scale(1,1); 426         -o-transform: scale(1,1); 427         transform: scale(1,1); 428         filter: alpha(opacity=1); 429         -webkit-opacity: 1; 430         -khtml-opacity: 1; 431         -moz-opacity: 1; 432         -ms-opacity: 1; 433         -o-opacity: 1; 434         opacity: 1 435     } 436  437     100% { 438         -webkit-transform: scale(2,2); 439         -moz-transform: scale(2,2); 440         -ms-transform: scale(2,2); 441         -o-transform: scale(2,2); 442         transform: scale(2,2); 443         filter: alpha(opacity=0); 444         -webkit-opacity: 0; 445         -khtml-opacity: 0; 446         -moz-opacity: 0; 447         -ms-opacity: 0; 448         -o-opacity: 0; 449         opacity: 0 450     } 451 } 452  453 @-webkit-keyframes cloudBgFloatScale2 { 454     0% { 455         -webkit-transform: scale(1,1); 456         -moz-transform: scale(1,1); 457         -ms-transform: scale(1,1); 458         -o-transform: scale(1,1); 459         transform: scale(1,1); 460         filter: alpha(opacity=1); 461         -webkit-opacity: 1; 462         -khtml-opacity: 1; 463         -moz-opacity: 1; 464         -ms-opacity: 1; 465         -o-opacity: 1; 466         opacity: 1 467     } 468  469     100% { 470         -webkit-transform: scale(8,8); 471         -moz-transform: scale(8,8); 472         -ms-transform: scale(8,8); 473         -o-transform: scale(8,8); 474         transform: scale(8,8); 475         filter: alpha(opacity=0); 476         -webkit-opacity: 0; 477         -khtml-opacity: 0; 478         -moz-opacity: 0; 479         -ms-opacity: 0; 480         -o-opacity: 0; 481         opacity: 0 482     } 483 } 484  485 @-moz-keyframes cloudBgFloatScale2 { 486     0% { 487         -webkit-transform: scale(1,1); 488         -moz-transform: scale(1,1); 489         -ms-transform: scale(1,1); 490         -o-transform: scale(1,1); 491         transform: scale(1,1); 492         filter: alpha(opacity=1); 493         -webkit-opacity: 1; 494         -khtml-opacity: 1; 495         -moz-opacity: 1; 496         -ms-opacity: 1; 497         -o-opacity: 1; 498         opacity: 1 499     } 500  501     100% { 502         -webkit-transform: scale(8,8); 503         -moz-transform: scale(8,8); 504         -ms-transform: scale(8,8); 505         -o-transform: scale(8,8); 506         transform: scale(8,8); 507         filter: alpha(opacity=0); 508         -webkit-opacity: 0; 509         -khtml-opacity: 0; 510         -moz-opacity: 0; 511         -ms-opacity: 0; 512         -o-opacity: 0; 513         opacity: 0 514     } 515 } 516  517 @-ms-keyframes cloudBgFloatScale2 { 518     0% { 519         -webkit-transform: scale(1,1); 520         -moz-transform: scale(1,1); 521         -ms-transform: scale(1,1); 522         -o-transform: scale(1,1); 523         transform: scale(1,1); 524         filter: alpha(opacity=1); 525         -webkit-opacity: 1; 526         -khtml-opacity: 1; 527         -moz-opacity: 1; 528         -ms-opacity: 1; 529         -o-opacity: 1; 530         opacity: 1 531     } 532  533     100% { 534         -webkit-transform: scale(8,8); 535         -moz-transform: scale(8,8); 536         -ms-transform: scale(8,8); 537         -o-transform: scale(8,8); 538         transform: scale(8,8); 539         filter: alpha(opacity=0); 540         -webkit-opacity: 0; 541         -khtml-opacity: 0; 542         -moz-opacity: 0; 543         -ms-opacity: 0; 544         -o-opacity: 0; 545         opacity: 0 546     } 547 } 548  549 @-o-keyframes cloudBgFloatScale2 { 550     0% { 551         -webkit-transform: scale(1,1); 552         -moz-transform: scale(1,1); 553         -ms-transform: scale(1,1); 554         -o-transform: scale(1,1); 555         transform: scale(1,1); 556         filter: alpha(opacity=1); 557         -webkit-opacity: 1; 558         -khtml-opacity: 1; 559         -moz-opacity: 1; 560         -ms-opacity: 1; 561         -o-opacity: 1; 562         opacity: 1 563     } 564  565     100% { 566         -webkit-transform: scale(8,8); 567         -moz-transform: scale(8,8); 568         -ms-transform: scale(8,8); 569         -o-transform: scale(8,8); 570         transform: scale(8,8); 571         filter: alpha(opacity=0); 572         -webkit-opacity: 0; 573         -khtml-opacity: 0; 574         -moz-opacity: 0; 575         -ms-opacity: 0; 576         -o-opacity: 0; 577         opacity: 0 578     } 579 } 580  581 @keyframes cloudBgFloatScale2 { 582     0% { 583         -webkit-transform: scale(1,1); 584         -moz-transform: scale(1,1); 585         -ms-transform: scale(1,1); 586         -o-transform: scale(1,1); 587         transform: scale(1,1); 588         filter: alpha(opacity=1); 589         -webkit-opacity: 1; 590         -khtml-opacity: 1; 591         -moz-opacity: 1; 592         -ms-opacity: 1; 593         -o-opacity: 1; 594         opacity: 1 595     } 596  597     100% { 598         -webkit-transform: scale(8,8); 599         -moz-transform: scale(8,8); 600         -ms-transform: scale(8,8); 601         -o-transform: scale(8,8); 602         transform: scale(8,8); 603         filter: alpha(opacity=0); 604         -webkit-opacity: 0; 605         -khtml-opacity: 0; 606         -moz-opacity: 0; 607         -ms-opacity: 0; 608         -o-opacity: 0; 609         opacity: 0 610     } 611 } 612  613 .lottery-animate-cloud { 614     -webkit-animation: lotteryCloundScale 1.5s linear infinite; 615     -moz-animation: lotteryCloundScale 1.5s linear infinite; 616     -ms-animation: lotteryCloundScale 1.5s linear infinite; 617     -o-animation: lotteryCloundScale 1.5s linear infinite; 618     animation: lotteryCloundScale 1.5s linear infinite 619 } 620  621 @-webkit-keyframes lotteryCloundScale { 622     0% { 623         -webkit-transform: scale(1,1); 624         -moz-transform: scale(1,1); 625         -ms-transform: scale(1,1); 626         -o-transform: scale(1,1); 627         transform: scale(1,1) 628     } 629  630     50% { 631         -webkit-transform: scale(1.2,1.2); 632         -moz-transform: scale(1.2,1.2); 633         -ms-transform: scale(1.2,1.2); 634         -o-transform: scale(1.2,1.2); 635         transform: scale(1.2,1.2) 636     } 637  638     100% { 639         -webkit-transform: scale(1,1); 640         -moz-transform: scale(1,1); 641         -ms-transform: scale(1,1); 642         -o-transform: scale(1,1); 643         transform: scale(1,1) 644     } 645 } 646  647 @-moz-keyframes lotteryCloundScale { 648     0% { 649         -webkit-transform: scale(1,1); 650         -moz-transform: scale(1,1); 651         -ms-transform: scale(1,1); 652         -o-transform: scale(1,1); 653         transform: scale(1,1) 654     } 655  656     50% { 657         -webkit-transform: scale(1.2,1.2); 658         -moz-transform: scale(1.2,1.2); 659         -ms-transform: scale(1.2,1.2); 660         -o-transform: scale(1.2,1.2); 661         transform: scale(1.2,1.2) 662     } 663  664     100% { 665         -webkit-transform: scale(1,1); 666         -moz-transform: scale(1,1); 667         -ms-transform: scale(1,1); 668         -o-transform: scale(1,1); 669         transform: scale(1,1) 670     } 671 } 672  673 @-ms-keyframes lotteryCloundScale { 674     0% { 675         -webkit-transform: scale(1,1); 676         -moz-transform: scale(1,1); 677         -ms-transform: scale(1,1); 678         -o-transform: scale(1,1); 679         transform: scale(1,1) 680     } 681  682     50% { 683         -webkit-transform: scale(1.2,1.2); 684         -moz-transform: scale(1.2,1.2); 685         -ms-transform: scale(1.2,1.2); 686         -o-transform: scale(1.2,1.2); 687         transform: scale(1.2,1.2) 688     } 689  690     100% { 691         -webkit-transform: scale(1,1); 692         -moz-transform: scale(1,1); 693         -ms-transform: scale(1,1); 694         -o-transform: scale(1,1); 695         transform: scale(1,1) 696     } 697 } 698  699 @-o-keyframes lotteryCloundScale { 700     0% { 701         -webkit-transform: scale(1,1); 702         -moz-transform: scale(1,1); 703         -ms-transform: scale(1,1); 704         -o-transform: scale(1,1); 705         transform: scale(1,1) 706     } 707  708     50% { 709         -webkit-transform: scale(1.2,1.2); 710         -moz-transform: scale(1.2,1.2); 711         -ms-transform: scale(1.2,1.2); 712         -o-transform: scale(1.2,1.2); 713         transform: scale(1.2,1.2) 714     } 715  716     100% { 717         -webkit-transform: scale(1,1); 718         -moz-transform: scale(1,1); 719         -ms-transform: scale(1,1); 720         -o-transform: scale(1,1); 721         transform: scale(1,1) 722     } 723 } 724  725 @keyframes lotteryCloundScale { 726     0% { 727         -webkit-transform: scale(1,1); 728         -moz-transform: scale(1,1); 729         -ms-transform: scale(1,1); 730         -o-transform: scale(1,1); 731         transform: scale(1,1) 732     } 733  734     50% { 735         -webkit-transform: scale(1.2,1.2); 736         -moz-transform: scale(1.2,1.2); 737         -ms-transform: scale(1.2,1.2); 738         -o-transform: scale(1.2,1.2); 739         transform: scale(1.2,1.2) 740     } 741  742     100% { 743         -webkit-transform: scale(1,1); 744         -moz-transform: scale(1,1); 745         -ms-transform: scale(1,1); 746         -o-transform: scale(1,1); 747         transform: scale(1,1) 748     } 749 } 750  751 .iconJump1 { 752     -webkit-animation: iconJumpTranslate3d .5s linear; 753     -moz-animation: iconJumpTranslate3d .5s linear; 754     -ms-animation: iconJumpTranslate3d .5s linear; 755     -o-animation: iconJumpTranslate3d .5s linear; 756     animation: iconJumpTranslate3d .5s linear 757 } 758  759 @-webkit-keyframes iconJumpTranslate3d { 760     0% { 761         -webkit-transform: translate3d(0,0,0); 762         -moz-transform: translate3d(0,0,0); 763         -ms-transform: translate3d(0,0,0); 764         -o-transform: translate3d(0,0,0); 765         transform: translate3d(0,0,0) 766     } 767  768     50% { 769         -webkit-transform: translate3d(0,-15px,0); 770         -moz-transform: translate3d(0,-15px,0); 771         -ms-transform: translate3d(0,-15px,0); 772         -o-transform: translate3d(0,-15px,0); 773         transform: translate3d(0,-15px,0) 774     } 775  776     100% { 777         -webkit-transform: translate3d(0,0,0); 778         -moz-transform: translate3d(0,0,0); 779         -ms-transform: translate3d(0,0,0); 780         -o-transform: translate3d(0,0,0); 781         transform: translate3d(0,0,0) 782     } 783 } 784  785 @-moz-keyframes iconJumpTranslate3d { 786     0% { 787         -webkit-transform: translate3d(0,0,0); 788         -moz-transform: translate3d(0,0,0); 789         -ms-transform: translate3d(0,0,0); 790         -o-transform: translate3d(0,0,0); 791         transform: translate3d(0,0,0) 792     } 793  794     50% { 795         -webkit-transform: translate3d(0,-15px,0); 796         -moz-transform: translate3d(0,-15px,0); 797         -ms-transform: translate3d(0,-15px,0); 798         -o-transform: translate3d(0,-15px,0); 799         transform: translate3d(0,-15px,0) 800     } 801  802     100% { 803         -webkit-transform: translate3d(0,0,0); 804         -moz-transform: translate3d(0,0,0); 805         -ms-transform: translate3d(0,0,0); 806         -o-transform: translate3d(0,0,0); 807         transform: translate3d(0,0,0) 808     } 809 } 810  811 @-ms-keyframes iconJumpTranslate3d { 812     0% { 813         -webkit-transform: translate3d(0,0,0); 814         -moz-transform: translate3d(0,0,0); 815         -ms-transform: translate3d(0,0,0); 816         -o-transform: translate3d(0,0,0); 817         transform: translate3d(0,0,0) 818     } 819  820     50% { 821         -webkit-transform: translate3d(0,-15px,0); 822         -moz-transform: translate3d(0,-15px,0); 823         -ms-transform: translate3d(0,-15px,0); 824         -o-transform: translate3d(0,-15px,0); 825         transform: translate3d(0,-15px,0) 826     } 827  828     100% { 829         -webkit-transform: translate3d(0,0,0); 830         -moz-transform: translate3d(0,0,0); 831         -ms-transform: translate3d(0,0,0); 832         -o-transform: translate3d(0,0,0); 833         transform: translate3d(0,0,0) 834     } 835 } 836  837 @-o-keyframes iconJumpTranslate3d { 838     0% { 839         -webkit-transform: translate3d(0,0,0); 840         -moz-transform: translate3d(0,0,0); 841         -ms-transform: translate3d(0,0,0); 842         -o-transform: translate3d(0,0,0); 843         transform: translate3d(0,0,0) 844     } 845  846     50% { 847         -webkit-transform: translate3d(0,-15px,0); 848         -moz-transform: translate3d(0,-15px,0); 849         -ms-transform: translate3d(0,-15px,0); 850         -o-transform: translate3d(0,-15px,0); 851         transform: translate3d(0,-15px,0) 852     } 853  854     100% { 855         -webkit-transform: translate3d(0,0,0); 856         -moz-transform: translate3d(0,0,0); 857         -ms-transform: translate3d(0,0,0); 858         -o-transform: translate3d(0,0,0); 859         transform: translate3d(0,0,0) 860     } 861 } 862  863 @keyframes iconJumpTranslate3d { 864     0% { 865         -webkit-transform: translate3d(0,0,0); 866         -moz-transform: translate3d(0,0,0); 867         -ms-transform: translate3d(0,0,0); 868         -o-transform: translate3d(0,0,0); 869         transform: translate3d(0,0,0) 870     } 871  872     50% { 873         -webkit-transform: translate3d(0,-15px,0); 874         -moz-transform: translate3d(0,-15px,0); 875         -ms-transform: translate3d(0,-15px,0); 876         -o-transform: translate3d(0,-15px,0); 877         transform: translate3d(0,-15px,0) 878     } 879  880     100% { 881         -webkit-transform: translate3d(0,0,0); 882         -moz-transform: translate3d(0,0,0); 883         -ms-transform: translate3d(0,0,0); 884         -o-transform: translate3d(0,0,0); 885         transform: translate3d(0,0,0) 886     } 887 } 888  889 .iconJump2 { 890     -webkit-animation: iconJumpTranslate3d .5s linear .3s; 891     -moz-animation: iconJumpTranslate3d .5s linear .3s; 892     -ms-animation: iconJumpTranslate3d .5s linear .3s; 893     -o-animation: iconJumpTranslate3d .5s linear .3s; 894     animation: iconJumpTranslate3d .5s linear .3s 895 } 896  897 .iconJump3 { 898     -webkit-animation: iconJumpTranslate3d .5s linear .5s; 899     -moz-animation: iconJumpTranslate3d .5s linear .5s; 900     -ms-animation: iconJumpTranslate3d .5s linear .5s; 901     -o-animation: iconJumpTranslate3d .5s linear .5s; 902     animation: iconJumpTranslate3d .5s linear .5s 903 } 904  905 .textMove { 906     -webkit-animation: textMoveTranslate3d .3s linear; 907     -moz-animation: textMoveTranslate3d .3s linear; 908     -ms-animation: textMoveTranslate3d .3s linear; 909     -o-animation: textMoveTranslate3d .3s linear; 910     animation: textMoveTranslate3d .3s linear 911 } 912  913 @-webkit-keyframes textMoveTranslate3d { 914     0% { 915         -webkit-transform: translate3d(-25px,10px,0); 916         -moz-transform: translate3d(-25px,10px,0); 917         -ms-transform: translate3d(-25px,10px,0); 918         -o-transform: translate3d(-25px,10px,0); 919         transform: translate3d(-25px,10px,0) 920     } 921  922     100% { 923         -webkit-transform: translate3d(0,0,0); 924         -moz-transform: translate3d(0,0,0); 925         -ms-transform: translate3d(0,0,0); 926         -o-transform: translate3d(0,0,0); 927         transform: translate3d(0,0,0) 928     } 929 } 930  931 @-moz-keyframes textMoveTranslate3d { 932     0% { 933         -webkit-transform: translate3d(-25px,10px,0); 934         -moz-transform: translate3d(-25px,10px,0); 935         -ms-transform: translate3d(-25px,10px,0); 936         -o-transform: translate3d(-25px,10px,0); 937         transform: translate3d(-25px,10px,0) 938     } 939  940     100% { 941         -webkit-transform: translate3d(0,0,0); 942         -moz-transform: translate3d(0,0,0); 943         -ms-transform: translate3d(0,0,0); 944         -o-transform: translate3d(0,0,0); 945         transform: translate3d(0,0,0) 946     } 947 } 948  949 @-ms-keyframes textMoveTranslate3d { 950     0% { 951         -webkit-transform: translate3d(-25px,10px,0); 952         -moz-transform: translate3d(-25px,10px,0); 953         -ms-transform: translate3d(-25px,10px,0); 954         -o-transform: translate3d(-25px,10px,0); 955         transform: translate3d(-25px,10px,0) 956     } 957  958     100% { 959         -webkit-transform: translate3d(0,0,0); 960         -moz-transform: translate3d(0,0,0); 961         -ms-transform: translate3d(0,0,0); 962         -o-transform: translate3d(0,0,0); 963         transform: translate3d(0,0,0) 964     } 965 } 966  967 @-o-keyframes textMoveTranslate3d { 968     0% { 969         -webkit-transform: translate3d(-25px,10px,0); 970         -moz-transform: translate3d(-25px,10px,0); 971         -ms-transform: translate3d(-25px,10px,0); 972         -o-transform: translate3d(-25px,10px,0); 973         transform: translate3d(-25px,10px,0) 974     } 975  976     100% { 977         -webkit-transform: translate3d(0,0,0); 978         -moz-transform: translate3d(0,0,0); 979         -ms-transform: translate3d(0,0,0); 980         -o-transform: translate3d(0,0,0); 981         transform: translate3d(0,0,0) 982     } 983 } 984  985 @keyframes textMoveTranslate3d { 986     0% { 987         -webkit-transform: translate3d(-25px,10px,0); 988         -moz-transform: translate3d(-25px,10px,0); 989         -ms-transform: translate3d(-25px,10px,0); 990         -o-transform: translate3d(-25px,10px,0); 991         transform: translate3d(-25px,10px,0) 992     } 993  994     100% { 995         -webkit-transform: translate3d(0,0,0); 996         -moz-transform: translate3d(0,0,0); 997         -ms-transform: translate3d(0,0,0); 998         -o-transform: translate3d(0,0,0); 999         transform: translate3d(0,0,0)1000     }1001 }1002 1003 .cloud01 {1004     -webkit-animation: cloudFloat1Translate3d 20s linear infinite;1005     -moz-animation: cloudFloat1Translate3d 20s linear infinite;1006     -ms-animation: cloudFloat1Translate3d 20s linear infinite;1007     -o-animation: cloudFloat1Translate3d 20s linear infinite;1008     animation: cloudFloat1Translate3d 20s linear infinite1009 }1010 1011 .cloud011 {1012     -webkit-animation: cloudFloat2Translate3d 10s linear 1;1013     -moz-animation: cloudFloat2Translate3d 10s linear 1;1014     -ms-animation: cloudFloat2Translate3d 10s linear 1;1015     -o-animation: cloudFloat2Translate3d 10s linear 1;1016     animation: cloudFloat2Translate3d 10s linear 11017 }1018 1019 .cloud02 {1020     -webkit-animation: cloudFloat1Translate3d 30s linear infinite 5s;1021     -moz-animation: cloudFloat1Translate3d 30s linear infinite 5s;1022     -ms-animation: cloudFloat1Translate3d 30s linear infinite 5s;1023     -o-animation: cloudFloat1Translate3d 30s linear infinite 5s;1024     animation: cloudFloat1Translate3d 30s linear infinite 5s1025 }1026 1027 .cloud03 {1028     -webkit-animation: cloudFloat1Translate3d 25s linear infinite 5s;1029     -moz-animation: cloudFloat1Translate3d 25s linear infinite 5s;1030     -ms-animation: cloudFloat1Translate3d 25s linear infinite 5s;1031     -o-animation: cloudFloat1Translate3d 25s linear infinite 5s;1032     animation: cloudFloat1Translate3d 25s linear infinite 5s1033 }1034 1035 @-webkit-keyframes cloudFloat1Translate3d {1036     0% {1037         -webkit-transform: translate3d(0,0,0);1038         -moz-transform: translate3d(0,0,0);1039         -ms-transform: translate3d(0,0,0);1040         -o-transform: translate3d(0,0,0);1041         transform: translate3d(0,0,0)1042     }1043 1044     100% {1045         -webkit-transform: translate3d(-2000px,0,0);1046         -moz-transform: translate3d(-2000px,0,0);1047         -ms-transform: translate3d(-2000px,0,0);1048         -o-transform: translate3d(-2000px,0,0);1049         transform: translate3d(-2000px,0,0)1050     }1051 }1052 1053 @-moz-keyframes cloudFloat1Translate3d {1054     0% {1055         -webkit-transform: translate3d(0,0,0);1056         -moz-transform: translate3d(0,0,0);1057         -ms-transform: translate3d(0,0,0);1058         -o-transform: translate3d(0,0,0);1059         transform: translate3d(0,0,0)1060     }1061 1062     100% {1063         -webkit-transform: translate3d(-2000px,0,0);1064         -moz-transform: translate3d(-2000px,0,0);1065         -ms-transform: translate3d(-2000px,0,0);1066         -o-transform: translate3d(-2000px,0,0);1067         transform: translate3d(-2000px,0,0)1068     }1069 }1070 1071 @-ms-keyframes cloudFloat1Translate3d {1072     0% {1073         -webkit-transform: translate3d(0,0,0);1074         -moz-transform: translate3d(0,0,0);1075         -ms-transform: translate3d(0,0,0);1076         -o-transform: translate3d(0,0,0);1077         transform: translate3d(0,0,0)1078     }1079 1080     100% {1081         -webkit-transform: translate3d(-2000px,0,0);1082         -moz-transform: translate3d(-2000px,0,0);1083         -ms-transform: translate3d(-2000px,0,0);1084         -o-transform: translate3d(-2000px,0,0);1085         transform: translate3d(-2000px,0,0)1086     }1087 }1088 1089 @-o-keyframes cloudFloat1Translate3d {1090     0% {1091         -webkit-transform: translate3d(0,0,0);1092         -moz-transform: translate3d(0,0,0);1093         -ms-transform: translate3d(0,0,0);1094         -o-transform: translate3d(0,0,0);1095         transform: translate3d(0,0,0)1096     }1097 1098     100% {1099         -webkit-transform: translate3d(-2000px,0,0);1100         -moz-transform: translate3d(-2000px,0,0);1101         -ms-transform: translate3d(-2000px,0,0);1102         -o-transform: translate3d(-2000px,0,0);1103         transform: translate3d(-2000px,0,0)1104     }1105 }1106 1107 @keyframes cloudFloat1Translate3d {1108     0% {1109         -webkit-transform: translate3d(0,0,0);1110         -moz-transform: translate3d(0,0,0);1111         -ms-transform: translate3d(0,0,0);1112         -o-transform: translate3d(0,0,0);1113         transform: translate3d(0,0,0)1114     }1115 1116     100% {1117         -webkit-transform: translate3d(-2000px,0,0);1118         -moz-transform: translate3d(-2000px,0,0);1119         -ms-transform: translate3d(-2000px,0,0);1120         -o-transform: translate3d(-2000px,0,0);1121         transform: translate3d(-2000px,0,0)1122     }1123 }1124 1125 @-webkit-keyframes cloudFloat2Translate3d {1126     0% {1127         -webkit-transform: translate3d(0,0,0);1128         -moz-transform: translate3d(0,0,0);1129         -ms-transform: translate3d(0,0,0);1130         -o-transform: translate3d(0,0,0);1131         transform: translate3d(0,0,0)1132     }1133 1134     100% {1135         -webkit-transform: translate3d(-800px,0,0);1136         -moz-transform: translate3d(-800px,0,0);1137         -ms-transform: translate3d(-800px,0,0);1138         -o-transform: translate3d(-800px,0,0);1139         transform: translate3d(-800px,0,0)1140     }1141 }1142 1143 @-moz-keyframes cloudFloat2Translate3d {1144     0% {1145         -webkit-transform: translate3d(0,0,0);1146         -moz-transform: translate3d(0,0,0);1147         -ms-transform: translate3d(0,0,0);1148         -o-transform: translate3d(0,0,0);1149         transform: translate3d(0,0,0)1150     }1151 1152     100% {1153         -webkit-transform: translate3d(-800px,0,0);1154         -moz-transform: translate3d(-800px,0,0);1155         -ms-transform: translate3d(-800px,0,0);1156         -o-transform: translate3d(-800px,0,0);1157         transform: translate3d(-800px,0,0)1158     }1159 }1160 1161 @-ms-keyframes cloudFloat2Translate3d {1162     0% {1163         -webkit-transform: translate3d(0,0,0);1164         -moz-transform: translate3d(0,0,0);1165         -ms-transform: translate3d(0,0,0);1166         -o-transform: translate3d(0,0,0);1167         transform: translate3d(0,0,0)1168     }1169 1170     100% {1171         -webkit-transform: translate3d(-800px,0,0);1172         -moz-transform: translate3d(-800px,0,0);1173         -ms-transform: translate3d(-800px,0,0);1174         -o-transform: translate3d(-800px,0,0);1175         transform: translate3d(-800px,0,0)1176     }1177 }1178 1179 @-o-keyframes cloudFloat2Translate3d {1180     0% {1181         -webkit-transform: translate3d(0,0,0);1182         -moz-transform: translate3d(0,0,0);1183         -ms-transform: translate3d(0,0,0);1184         -o-transform: translate3d(0,0,0);1185         transform: translate3d(0,0,0)1186     }1187 1188     100% {1189         -webkit-transform: translate3d(-800px,0,0);1190         -moz-transform: translate3d(-800px,0,0);1191         -ms-transform: translate3d(-800px,0,0);1192         -o-transform: translate3d(-800px,0,0);1193         transform: translate3d(-800px,0,0)1194     }1195 }1196 1197 @keyframes cloudFloat2Translate3d {1198     0% {1199         -webkit-transform: translate3d(0,0,0);1200         -moz-transform: translate3d(0,0,0);1201         -ms-transform: translate3d(0,0,0);1202         -o-transform: translate3d(0,0,0);1203         transform: translate3d(0,0,0)1204     }1205 1206     100% {1207         -webkit-transform: translate3d(-800px,0,0);1208         -moz-transform: translate3d(-800px,0,0);1209         -ms-transform: translate3d(-800px,0,0);1210         -o-transform: translate3d(-800px,0,0);1211         transform: translate3d(-800px,0,0)1212     }1213 }1214 1215 .room-nav {1216     position: relative1217 }1218 1219 .room-nav .room-nav-img {1220     width: 100%;1221     margin-top: 34px1222 }1223 1224 .room-nav .item-hover-img1,.room-nav .item-hover-img2,.room-nav .item-hover-img3,.room-nav .nav-item,.room-nav .item-img {1225     position: absolute;1226     cursor: pointer1227 }1228 1229 .room-nav .nav-gj {1230     top: 252px;1231     left: 231px1232 }1233 1234 .room-nav .nav-gj .gj01 {1235     width: 55px;1236     top: -53px;1237     left: 23px1238 }1239 1240 .room-nav .nav-gj .gj02 {1241     width: 38px;1242     top: 20px;1243     left: 32px1244 }1245 1246 .room-nav .nav-gj .gj03 {1247     width: 127px;1248     top: -162px;1249     left: -29px1250 }1251 1252 .room-nav .nav-gj .item-img {1253     width: 110px1254 }1255 1256 .room-nav .nav-ct {1257     top: 132px;1258     left: 380px1259 }1260 1261 .room-nav .nav-ct .item-img {1262     width: 128px;1263     z-index: 51264 }1265 1266 .room-nav .nav-ct .ct01 {1267     width: 62px;1268     top: -41px;1269     left: -7px;1270     z-index: 61271 }1272 1273 .room-nav .nav-ct .ct02 {1274     width: 25px;1275     top: 48px;1276     left: 90px;1277     z-index: 71278 }1279 1280 .room-nav .nav-ct .ct04 {1281     width: 118px;1282     top: -115px;1283     left: -28px;1284     z-index: 71285 }1286 1287 .room-nav .nav-mf {1288     top: 68px;1289     left: 550px1290 }1291 1292 .room-nav .nav-mf .item-img {1293     width: 84px1294 }1295 1296 .room-nav .nav-mf .mf01 {1297     width: 135px;1298     top: -32px;1299     left: -24px1300 }1301 1302 .room-nav .nav-mf .mf02 {1303     width: 34px;1304     top: 70px;1305     left: 88px1306 }1307 1308 .room-nav .nav-mf .mf04 {1309     width: 130px;1310     top: -57px;1311     left: 130px1312 }1313 1314 .room-nav .nav-yx {1315     top: 160px;1316     left: 712px1317 }1318 1319 .room-nav .nav-yx .item-img {1320     width: 89px1321 }1322 1323 .room-nav .nav-yx .yx01 {1324     width: 28px;1325     top: -45px;1326     left: 10px1327 }1328 1329 .room-nav .nav-yx .yx02 {1330     width: 67px;1331     top: 20px;1332     left: 54px1333 }1334 1335 .room-nav .nav-yx .yx04 {1336     width: 129px;1337     top: -86px;1338     left: 115px1339 }1340 1341 .room-nav .nav-yh {1342     top: 240px;1343     left: 863px1344 }1345 1346 .room-nav .nav-yh .yh01 {1347     width: 98px;1348     top: -31px;1349     left: -1px;1350     z-index: 41351 }1352 1353 .room-nav .nav-yh .yh04 {1354     width: 126px;1355     top: -100px;1356     left: 114px;1357     z-index: 11358 }1359 1360 .room-nav .nav-yh .item-img {1361     z-index: 3;1362     width: 95px1363 }1364 1365 .room-nav .nav-cloud {1366     position: absolute;1367     top: 280px;1368     left: 543px1369 }1370 1371 .room-nav .nav-cloud .nav-cloud-img {1372     cursor: pointer;1373     position: absolute;1374     top: 0;1375     left: 7px;1376     width: 96px;1377     z-index: 101378 }1379 1380 .room-nav .nav-cloud .nav-cloud-bg-float1,.room-nav .nav-cloud .nav-cloud-bg-float2 {1381     position: absolute;1382     top: 28px;1383     left: 30px;1384     width: 50px1385 }1386 1387 .follow-fixed-bottom {1388     position: fixed!important;1389     bottom: 01390 }1391 1392 .follow-fixed-top {1393     position: fixed!important;1394     top: 01395 }1396 1397 .follow-current {1398     background-color: #ea3252!important1399 }1400 1401 .follow-wrap {1402     position: absolute;1403     z-index: 1000;1404     background-color: #254871;1405     height: 100px;1406     line-height: 100px;1407     width: 100%;1408     min-width: 1200px1409 }1410 1411 .follow-wrap .follow-list {1412     width: 900px;1413     height: 100px;1414     margin: 0 auto1415 }1416 1417 .follow-wrap .follow-list a {1418     margin-right: 1px;1419     display: block;1420     float: left;1421     width: 299px;1422     height: 100px;1423     text-align: center;1424     color: #fff!important;1425     text-decoration: none!important1426 }1427 1428 .follow-wrap .follow-list a:hover {1429     background-color: #ea3252;1430     text-decoration: none!important1431 }1432 1433 .follow-wrap .follow-list .follow-item .item-top {1434     font-weight: 700;1435     height: 37px;1436     line-height: 37px;1437     font-size: 30px;1438     display: block;1439     margin-top: 5px1440 }1441 1442 .follow-wrap .follow-list .follow-item .item-center {1443     height: 30px;1444     line-height: 30px;1445     font-size: 16px;1446     display: block1447 }1448 1449 .follow-wrap .follow-list .follow-item .item-bottom {1450     height: 18px;1451     line-height: 18px;1452     width: 175px;1453     font-size: 12px;1454     display: block;1455     color: #000;1456     background-color: #fff;1457     border-radius: 10px;1458     margin: 0 auto1459 }1460 1461 .room-lottery {1462     text-align: center;1463     margin-top: 10px1464 }1465 1466 .room-lottery h3 {1467     font-size: 60px;1468     font-weight: 4001469 }1470 1471 .room-lottery h3 span {1472     color: #ea32521473 }1474 1475 .room-lottery .lottery-title {1476     width: 100%1477 }1478 1479 .room-lottery .lottery-body {1480     width: 740px;1481     height: 355px;1482     margin: 30px auto 70px1483 }1484 1485 .room-lottery .lottery-left {1486     float: left;1487     width: 360px;1488     position: relative1489 }1490 1491 .room-lottery .lottery-left .lottery-box {1492     float: left;1493     width: 174px;1494     height: 174px;1495     margin-right: 5px;1496     text-align: center;1497     line-height: 174px;1498     font-size: 40px;1499     color: #fff1500 }1501 1502 .room-lottery .lottery-right {1503     float: left;1504     margin-left: 42px;1505     margin-top: -20px;1506     text-align: center;1507     background-color: #f0f0f0;1508     padding: 20px 7px 20px 20px;1509     width: 308px1510 }1511 1512 .room-lottery .lottery-right .lottery-raw {1513     font-size: 14px;1514     margin-top: 20px;1515     text-align: left1516 }1517 1518 .room-lottery .lottery-right .lottery-raw-always {1519     font-size: 14px;1520     text-align: left1521 }1522 1523 .room-lottery .lottery-right .lottery-raw .btn-raw-detail,.room-lottery .lottery-right .lottery-raw-always .btn-raw-detail {1524     font-size: 14px1525 }1526 1527 .room-lottery .lottery-right .lottery-raw .raw-certify,.room-lottery .lottery-right .lottery-raw-always .raw-certify {1528     color: #2b9c151529 }1530 1531 .room-lottery .lottery-right .lottery-raw-always {1532     margin-top: 10px!important1533 }1534 1535 .room-lottery .lottery-right .lottery-list {1536     margin-top: 15px1537 }1538 1539 .room-lottery .lottery-right .lottery-list .list-title {1540     background-color: #ea3252;1541     color: #fff;1542     font-size: 14px;1543     width: 87px;1544     height: 34px;1545     line-height: 34px;1546     text-align: center1547 }1548 1549 .room-lottery .lottery-right .lottery-list ul {1550     background: url(http://gtms04.alicdn.com/tps/i4/TB1eVPrGpXXXXbrXVXXr4TB2VXX-295-174.png) no-repeat;1551     padding: 14px 0;1552     width: 300px;1553     color: #333;1554     line-height: 24px1555 }1556 1557 .room-lottery .lottery-right .lottery-list ul .list-m {1558     margin: 0 10px1559 }1560 1561 .room-lottery .lottery-right .lottery-list ul .list-red {1562     color: #ea32521563 }1564 1565 .lottery-cloud {1566     position: absolute;1567     width: 54px;1568     top: 150px;1569     left: 150px1570 }1571 1572 .lottery-btn {1573     display: block;1574     width: 295px;1575     height: 85px;1576     line-height: 85px;1577     text-align: center;1578     background-color: #ea3252;1579     font-size: 40px;1580     color: #fff!important;1581     position: relative;1582     cursor: pointer1583 }1584 1585 .lottery-btn .btn-mouse {1586     width: 244px;1587     position: absolute;1588     left: 18px;1589     top: 18px1590 }1591 1592 .lottery-btn .btn-bottom {1593     background-color: #c11e3a;1594     display: block;1595     height: 6px;1596     width: 100%;1597     position: absolute;1598     top: 84px1599 }1600 1601 .lottery-btn .btn-text {1602     margin-left: 10px1603 }1604 1605 .lottery-btn:hover {1606     text-decoration: none;1607     background-color: #ff44641608 }1609 1610 .lottery-btn:hover .btn-bottom {1611     background-color: #d92f4c1612 }1613 1614 .lottery-btn:active {1615     background-color: #da26461616 }1617 1618 .lottery-btn:active .btn-bottom {1619     background-color: #b914311620 }1621 1622 .lottery-btn-disable {1623     cursor: default;1624     background-color: #ccc!important1625 }1626 1627 .lottery-btn-disable .btn-bottom {1628     background-color: #b3b3b3!important1629 }1630 1631 .lottery-box.box-bottom {1632     margin-top: 5px1633 }1634 1635 .room-seckill .seckill-title {1636     width: 100%1637 }1638 1639 .room-seckill .seckill-body {1640     width: 740px;1641     height: 400px;1642     margin: 50px auto 01643 }1644 1645 .room-seckill .seckill-body .seckill-left {1646     width: 358px;1647     float: left;1648     text-align: center1649 }1650 1651 .room-seckill .seckill-body .seckill-left .seckill-logo {1652     width: 300px1653 }1654 1655 .room-seckill .seckill-body .seckill-left .seckill-config {1656     color: #666;1657     font-size: 12px1658 }1659 1660 .room-seckill .seckill-body .seckill-left .seckill-money {1661     height: 35px;1662     line-height: 35px;1663     background-color: #f60;1664     text-align: center;1665     color: #fff;1666     font-size: 18px;1667     margin-top: 12px1668 }1669 1670 .room-seckill .seckill-body .seckill-left .seckill-money .money-src {1671     text-decoration: line-through;1672     font-size: 14px;1673     color: #fdb79d1674 }1675 1676 .room-seckill .seckill-body .seckill-left .seckill-time {1677     margin-top: 2px1678 }1679 1680 .room-seckill .seckill-body .seckill-left .seckill-time span {1681     float: left;1682     width: 118px;1683     margin-right: 2px;1684     background-color: #1bb6ee;1685     height: 40px;1686     line-height: 40px;1687     font-size: 14px;1688     color: #fff1689 }1690 1691 .room-seckill .seckill-body .seckill-left .seckill-info {1692     text-align: left;1693     line-height: 24px;1694     clear: both;1695     font-size: 14px;1696     padding-top: 10px1697 }1698 1699 .room-seckill .seckill-body .seckill-left .seckill-info a {1700     margin-left: 4px1701 }1702 1703 .room-seckill .seckill-body .seckill-right {1704     width: 330px;1705     float: right1706 }1707 1708 .room-seckill .seckill-body .seckill-right .seckill-iphone {1709     position: relative;1710     top: -15px;1711     left: 70px1712 }1713 1714 .room-seckill .seckill-body .seckill-right .seckill-iphone img {1715     width: 220px;1716     position: relative;1717     left: 10px1718 }1719 1720 .room-seckill .seckill-body .seckill-right .seckill-iphone .iphone-detail {1721     position: absolute;1722     bottom: 5px;1723     left: -7px1724 }1725 1726 .room-seckill .seckill-body .seckill-right .seckill-repost {1727     background-color: #f0f0f0;1728     padding: 20px;1729     height: 260px1730 }1731 1732 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have {1733     height: 60px;1734     line-height: 60px1735 }1736 1737 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have .hava-tip {1738     font-size: 14px;1739     float: left1740 }1741 1742 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have .hava-tip .tip-big {1743     font-size: 24px;1744     margin-right: 5px1745 }1746 1747 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have .have-right {1748     float: right1749 }1750 1751 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have .have-right .have-num {1752     font-size: 50px;1753     color: #ea3252;1754     font-weight: 700;1755     font-family: Arial1756 }1757 1758 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have .have-right .have-unit {1759     font-size: 50px;1760     color: #000;1761     font-weight: 700;1762     position: relative;1763     top: -4px1764 }1765 1766 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will {1767     position: relative;1768     margin-top: 15px;1769     text-align: center;1770     height: 20px;1771     clear: both1772 }1773 1774 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-blue {1775     width: 100%;1776     height: 19px;1777     line-height: 19px;1778     background-color: #254871;1779     color: #fff;1780     text-align: right1781 }1782 1783 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-blue .progress-result {1784     margin-right: 2px1785 }1786 1787 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-red {1788     margin-top: -19px1789 }1790 1791 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-red .progress-red-left-wrap {1792     width: 98%1793 }1794 1795 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-red .progress-red-left-wrap .progress-red-left {1796     float: left;1797     height: 19px;1798     line-height: 19px;1799     background-color: #ea3252;1800     color: #fff;1801     transition: all .6s ease-in-out;1802     -webkit-transition: all .6s ease-in-out;1803     -moz-transition: all .6s ease-in-out;1804     -o-transition: all .6s ease-in-out;1805     -ms-transition: all .6s ease-in-out1806 }1807 1808 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-red .progress-red-right img {1809     width: 5px;1810     float: left1811 }1812 1813 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-value {1814     width: 100%;1815     color: #fff;1816     font-size: 12px;1817     position: absolute;1818     top: 0;1819     height: 20px1820 }1821 1822 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-raw {1823     color: #333;1824     width: 100%;1825     text-align: center;1826     margin-top: 5px;1827     margin-bottom: 15px1828 }1829 1830 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-total {1831     font-size: 14px;1832     color: #333;1833     text-align: center;1834     margin-top: 10px1835 }1836 1837 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-total .seckill-total-num {1838     color: #ea32521839 }1840 1841 .repost-btn {1842     display: block;1843     width: 290px;1844     height: 85px;1845     line-height: 85px;1846     text-align: center;1847     background-color: #ea3252;1848     font-size: 40px;1849     color: #fff!important;1850     position: relative;1851     cursor: pointer1852 }1853 1854 .repost-btn .img-repost {1855     width: 252px;1856     position: absolute;1857     left: 18px;1858     top: 18px1859 }1860 1861 .repost-btn .btn-bottom {1862     background-color: #c11e3a;1863     display: block;1864     height: 6px;1865     width: 100%;1866     position: absolute;1867     top: 84px1868 }1869 1870 .repost-btn:hover {1871     text-decoration: none;1872     background-color: #ff44641873 }1874 1875 .repost-btn:hover .btn-bottom {1876     background-color: #d92f4c1877 }1878 1879 .repost-btn:active {1880     background-color: #da26461881 }1882 1883 .repost-btn:active .btn-bottom {1884     background-color: #b914311885 }1886 1887 .room-fullsent {1888     text-align: center1889 }1890 1891 .room-fullsent .fullsent-title {1892     width: 932px1893 }1894 1895 .room-fullsent .fullsent-body {1896     padding-top: 15px1897 }1898 1899 .room-fullsent .fullsent-raw {1900     width: 1000px;1901     font-size: 16px;1902     text-align: left;1903     color: #333;1904     line-height: 28px;1905     margin: 10px auto 01906 }1907 1908 .room-fullsent .fullsent-logo {1909     margin-top: 15px1910 }1911 1912 .room-fullsent .fullsent-logo img {1913     width: 1000px1914 }1915 1916 .room-fullsent .fullsent-container {1917     width: 740px;1918     height: 400px;1919     margin: 0 auto;1920     padding-top: 20px1921 }1922 1923 .room-fullsent .fullsent-container .fullsent-left {1924     float: left1925 }1926 1927 .room-fullsent .fullsent-container .fullsent-left img {1928     width: 355px;1929     display: block;1930     margin-bottom: 12px1931 }1932 1933 .room-fullsent .fullsent-container .fullsent-right {1934     float: right;1935     background-color: #f0f0f0;1936     width: 295px;1937     height: 350px;1938     padding: 20px1939 }1940 1941 .room-fullsent .fullsent-container .fullsent-right .fullsent-raw {1942     font-size: 14px;1943     text-align: center;1944     width: 100%1945 }1946 1947 .room-fullsent .fullsent-container .fullsent-right .fullsent-raw .btn-raw-detail {1948     font-size: 14px1949 }1950 1951 .room-fullsent .fullsent-container .fullsent-right .fullsent-raw .raw-certify {1952     color: #2b9c151953 }1954 1955 .room-fullsent .fullsent-container .fullsent-right .fullsent-list {1956     margin-top: 15px1957 }1958 1959 .room-fullsent .fullsent-container .fullsent-right .fullsent-list .list-title {1960     background-color: #ea3252;1961     color: #fff;1962     font-size: 14px;1963     width: 87px;1964     height: 34px;1965     line-height: 34px;1966     text-align: center1967 }1968 1969 .room-fullsent .fullsent-container .fullsent-right .fullsent-list ul {1970     background: url(http://gtms04.alicdn.com/tps/i4/TB1eVPrGpXXXXbrXVXXr4TB2VXX-295-174.png) no-repeat;1971     padding: 14px 0;1972     width: 300px;1973     height: 140px;1974     line-height: 140px;1975     text-align: center;1976     color: #ababab;1977     font-size: 18px1978 }1979 1980 .room-fullsent .fullsent-container .fullsent-right .fullsent-list ul .list-m {1981     margin: 0 10px1982 }1983 1984 .room-fullsent .fullsent-container .fullsent-right .fullsent-list ul .list-red {1985     color: #ea32521986 }1987 1988 .fullsent-btn {1989     display: block;1990     width: 295px;1991     height: 85px;1992     line-height: 85px;1993     text-align: center;1994     background-color: #ea3252;1995     font-size: 40px;1996     color: #fff!important;1997     position: relative;1998     cursor: pointer1999 }2000 2001 .fullsent-btn .btn-mouse {2002     width: 244px;2003     position: absolute;2004     left: 18px;2005     top: 18px2006 }2007 2008 .fullsent-btn .btn-bottom {2009     background-color: #c11e3a;2010     display: block;2011     height: 6px;2012     width: 100%;2013     position: absolute;2014     top: 84px2015 }2016 2017 .fullsent-btn .btn-text {2018     margin-left: 10px2019 }2020 2021 .fullsent-btn:hover {2022     text-decoration: none;2023     background-color: #ff44642024 }2025 2026 .fullsent-btn:hover .btn-bottom {2027     background-color: #d92f4c2028 }2029 2030 .fullsent-btn:active {2031     background-color: #da26462032 }2033 2034 .fullsent-btn:active .btn-bottom {2035     background-color: #b914312036 }2037 2038 .fullsent-btn-disable {2039     cursor: default;2040     background-color: #ccc!important2041 }2042 2043 .fullsent-btn-disable .btn-bottom {2044     background-color: #b3b3b3!important2045 }2046 2047 .fullsent-box.box-bottom {2048     margin-top: 5px2049 }2050 2051 .main {2052     width: 100%;2053     background-color: #fff;2054     background: url(http://gtms01.alicdn.com/tps/i1/TB1VjWoGpXXXXcdaXXXL40uSVXX-3200-3696.jpeg) no-repeat center -380px;2055     overflow-x: hidden;2056     min-width: 1200px2057 }2058 2059 .container {2060     width: 1200px!important;2061     margin: 0 auto;2062     position: relative2063 }2064 2065 .container .room-gua .gua {2066     position: absolute2067 }2068 2069 .container .room-gua .gua01 {2070     width: 50px;2071     top: 382px;2072     left: -35px2073 }2074 2075 .container .room-gua .gua02 {2076     width: 50px;2077     top: -21px;2078     left: 230px2079 }2080 2081 .container .room-gua .gua03 {2082     width: 50px;2083     top: 249px;2084     right: -61px2085 }2086 2087 .container .room-cloud .cloud {2088     position: absolute2089 }2090 2091 .container .room-cloud .cloud01 {2092     width: 218px;2093     top: 40px;2094     right: -400px2095 }2096 2097 .container .room-cloud .cloud011 {2098     width: 218px;2099     top: 40px;2100     left: 50px2101 }2102 2103 .container .room-cloud .cloud02 {2104     width: 138px;2105     top: 140px;2106     right: -400px2107 }2108 2109 .container .room-cloud .cloud03 {2110     width: 187px;2111     top: 460px;2112     right: -400px2113 }2114 2115 .scale-half {2116     position: relative;2117     max-width: 50%;2118     height: auto2119 }2120 2121 .room-more .room-more-img {2122     width: 100%;2123     margin-bottom: -4px2124 }2125 2126 .pop-content {2127     font-size: 18px;2128     line-height: 26px;2129     margin-top: 30px;2130     color: #0002131 }2132 2133 .room-red {2134     color: #ea32522135 }2136 2137 .rule-list {2138     list-style-type: decimal;2139     padding-left: 25px;2140     line-height: 25px2141 }2142 2143 .room-ad img {2144     display: block;2145     width: 1000px;2146     height: 80px;2147     margin: 50px auto;2148     background-color: #20cef32149 }2150 2151 .room-footer {2152     clear: both;2153     margin-top: 100px;2154     width: 100%;2155     text-align: center2156 }2157 2158 .room-footer img {2159     width: 100%2160 }2161 2162 .nav-right {2163     position: fixed;2164     right: 0;2165     top: 50%;2166     margin-top: -142px;2167     display: none2168 }2169 2170 .nav-right .right-img {2171     width: 129px2172 }2173 2174 .nav-right .right-item {2175     position: absolute;2176     right: 15px;2177     text-align: center;2178     font-size: 12px;2179     color: #fff;2180     width: 100px;2181     height: 28px;2182     line-height: 28px2183 }2184 2185 .nav-right .right-item .right-link {2186     display: block;2187     width: 100%;2188     height: 100%;2189     color: #fff!important;2190     text-decoration: none!important2191 }2192 2193 .nav-right .right-item .right-link:hover {2194     text-decoration: none!important;2195     background-color: #516d8d2196 }2197 2198 .nav-right .item2 {2199     top: 121px2200 }2201 2202 .nav-right .item3 {2203     top: 149px2204 }2205 2206 .nav-right .item4 {2207     top: 177px2208 }2209 2210 .nav-right .item5 {2211     top: 205px2212 }2213 2214 .nav-right .item1 {2215     top: 94px!important2216 }2217 2218 .nav-right .right-gotop {2219     position: absolute;2220     top: 246px;2221     right: 56px2222 }