阿里云1218动态css3代码
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 infinite 1009 } 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 1 1017 } 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 5s 1025 } 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 5s 1033 } 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: relative 1217 } 1218 1219 .room-nav .room-nav-img { 1220 width: 100%; 1221 margin-top: 34px 1222 } 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: pointer 1227 } 1228 1229 .room-nav .nav-gj { 1230 top: 252px; 1231 left: 231px 1232 } 1233 1234 .room-nav .nav-gj .gj01 { 1235 width: 55px; 1236 top: -53px; 1237 left: 23px 1238 } 1239 1240 .room-nav .nav-gj .gj02 { 1241 width: 38px; 1242 top: 20px; 1243 left: 32px 1244 } 1245 1246 .room-nav .nav-gj .gj03 { 1247 width: 127px; 1248 top: -162px; 1249 left: -29px 1250 } 1251 1252 .room-nav .nav-gj .item-img { 1253 width: 110px 1254 } 1255 1256 .room-nav .nav-ct { 1257 top: 132px; 1258 left: 380px 1259 } 1260 1261 .room-nav .nav-ct .item-img { 1262 width: 128px; 1263 z-index: 5 1264 } 1265 1266 .room-nav .nav-ct .ct01 { 1267 width: 62px; 1268 top: -41px; 1269 left: -7px; 1270 z-index: 6 1271 } 1272 1273 .room-nav .nav-ct .ct02 { 1274 width: 25px; 1275 top: 48px; 1276 left: 90px; 1277 z-index: 7 1278 } 1279 1280 .room-nav .nav-ct .ct04 { 1281 width: 118px; 1282 top: -115px; 1283 left: -28px; 1284 z-index: 7 1285 } 1286 1287 .room-nav .nav-mf { 1288 top: 68px; 1289 left: 550px 1290 } 1291 1292 .room-nav .nav-mf .item-img { 1293 width: 84px 1294 } 1295 1296 .room-nav .nav-mf .mf01 { 1297 width: 135px; 1298 top: -32px; 1299 left: -24px 1300 } 1301 1302 .room-nav .nav-mf .mf02 { 1303 width: 34px; 1304 top: 70px; 1305 left: 88px 1306 } 1307 1308 .room-nav .nav-mf .mf04 { 1309 width: 130px; 1310 top: -57px; 1311 left: 130px 1312 } 1313 1314 .room-nav .nav-yx { 1315 top: 160px; 1316 left: 712px 1317 } 1318 1319 .room-nav .nav-yx .item-img { 1320 width: 89px 1321 } 1322 1323 .room-nav .nav-yx .yx01 { 1324 width: 28px; 1325 top: -45px; 1326 left: 10px 1327 } 1328 1329 .room-nav .nav-yx .yx02 { 1330 width: 67px; 1331 top: 20px; 1332 left: 54px 1333 } 1334 1335 .room-nav .nav-yx .yx04 { 1336 width: 129px; 1337 top: -86px; 1338 left: 115px 1339 } 1340 1341 .room-nav .nav-yh { 1342 top: 240px; 1343 left: 863px 1344 } 1345 1346 .room-nav .nav-yh .yh01 { 1347 width: 98px; 1348 top: -31px; 1349 left: -1px; 1350 z-index: 4 1351 } 1352 1353 .room-nav .nav-yh .yh04 { 1354 width: 126px; 1355 top: -100px; 1356 left: 114px; 1357 z-index: 1 1358 } 1359 1360 .room-nav .nav-yh .item-img { 1361 z-index: 3; 1362 width: 95px 1363 } 1364 1365 .room-nav .nav-cloud { 1366 position: absolute; 1367 top: 280px; 1368 left: 543px 1369 } 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: 10 1378 } 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: 50px 1385 } 1386 1387 .follow-fixed-bottom { 1388 position: fixed!important; 1389 bottom: 0 1390 } 1391 1392 .follow-fixed-top { 1393 position: fixed!important; 1394 top: 0 1395 } 1396 1397 .follow-current { 1398 background-color: #ea3252!important 1399 } 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: 1200px 1409 } 1410 1411 .follow-wrap .follow-list { 1412 width: 900px; 1413 height: 100px; 1414 margin: 0 auto 1415 } 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!important 1426 } 1427 1428 .follow-wrap .follow-list a:hover { 1429 background-color: #ea3252; 1430 text-decoration: none!important 1431 } 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: 5px 1440 } 1441 1442 .follow-wrap .follow-list .follow-item .item-center { 1443 height: 30px; 1444 line-height: 30px; 1445 font-size: 16px; 1446 display: block 1447 } 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 auto 1459 } 1460 1461 .room-lottery { 1462 text-align: center; 1463 margin-top: 10px 1464 } 1465 1466 .room-lottery h3 { 1467 font-size: 60px; 1468 font-weight: 400 1469 } 1470 1471 .room-lottery h3 span { 1472 color: #ea3252 1473 } 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 70px 1483 } 1484 1485 .room-lottery .lottery-left { 1486 float: left; 1487 width: 360px; 1488 position: relative 1489 } 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: #fff 1500 } 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: 308px 1510 } 1511 1512 .room-lottery .lottery-right .lottery-raw { 1513 font-size: 14px; 1514 margin-top: 20px; 1515 text-align: left 1516 } 1517 1518 .room-lottery .lottery-right .lottery-raw-always { 1519 font-size: 14px; 1520 text-align: left 1521 } 1522 1523 .room-lottery .lottery-right .lottery-raw .btn-raw-detail,.room-lottery .lottery-right .lottery-raw-always .btn-raw-detail { 1524 font-size: 14px 1525 } 1526 1527 .room-lottery .lottery-right .lottery-raw .raw-certify,.room-lottery .lottery-right .lottery-raw-always .raw-certify { 1528 color: #2b9c15 1529 } 1530 1531 .room-lottery .lottery-right .lottery-raw-always { 1532 margin-top: 10px!important 1533 } 1534 1535 .room-lottery .lottery-right .lottery-list { 1536 margin-top: 15px 1537 } 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: center 1547 } 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: 24px 1555 } 1556 1557 .room-lottery .lottery-right .lottery-list ul .list-m { 1558 margin: 0 10px 1559 } 1560 1561 .room-lottery .lottery-right .lottery-list ul .list-red { 1562 color: #ea3252 1563 } 1564 1565 .lottery-cloud { 1566 position: absolute; 1567 width: 54px; 1568 top: 150px; 1569 left: 150px 1570 } 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: pointer 1583 } 1584 1585 .lottery-btn .btn-mouse { 1586 width: 244px; 1587 position: absolute; 1588 left: 18px; 1589 top: 18px 1590 } 1591 1592 .lottery-btn .btn-bottom { 1593 background-color: #c11e3a; 1594 display: block; 1595 height: 6px; 1596 width: 100%; 1597 position: absolute; 1598 top: 84px 1599 } 1600 1601 .lottery-btn .btn-text { 1602 margin-left: 10px 1603 } 1604 1605 .lottery-btn:hover { 1606 text-decoration: none; 1607 background-color: #ff4464 1608 } 1609 1610 .lottery-btn:hover .btn-bottom { 1611 background-color: #d92f4c 1612 } 1613 1614 .lottery-btn:active { 1615 background-color: #da2646 1616 } 1617 1618 .lottery-btn:active .btn-bottom { 1619 background-color: #b91431 1620 } 1621 1622 .lottery-btn-disable { 1623 cursor: default; 1624 background-color: #ccc!important 1625 } 1626 1627 .lottery-btn-disable .btn-bottom { 1628 background-color: #b3b3b3!important 1629 } 1630 1631 .lottery-box.box-bottom { 1632 margin-top: 5px 1633 } 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 0 1643 } 1644 1645 .room-seckill .seckill-body .seckill-left { 1646 width: 358px; 1647 float: left; 1648 text-align: center 1649 } 1650 1651 .room-seckill .seckill-body .seckill-left .seckill-logo { 1652 width: 300px 1653 } 1654 1655 .room-seckill .seckill-body .seckill-left .seckill-config { 1656 color: #666; 1657 font-size: 12px 1658 } 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: 12px 1668 } 1669 1670 .room-seckill .seckill-body .seckill-left .seckill-money .money-src { 1671 text-decoration: line-through; 1672 font-size: 14px; 1673 color: #fdb79d 1674 } 1675 1676 .room-seckill .seckill-body .seckill-left .seckill-time { 1677 margin-top: 2px 1678 } 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: #fff 1689 } 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: 10px 1697 } 1698 1699 .room-seckill .seckill-body .seckill-left .seckill-info a { 1700 margin-left: 4px 1701 } 1702 1703 .room-seckill .seckill-body .seckill-right { 1704 width: 330px; 1705 float: right 1706 } 1707 1708 .room-seckill .seckill-body .seckill-right .seckill-iphone { 1709 position: relative; 1710 top: -15px; 1711 left: 70px 1712 } 1713 1714 .room-seckill .seckill-body .seckill-right .seckill-iphone img { 1715 width: 220px; 1716 position: relative; 1717 left: 10px 1718 } 1719 1720 .room-seckill .seckill-body .seckill-right .seckill-iphone .iphone-detail { 1721 position: absolute; 1722 bottom: 5px; 1723 left: -7px 1724 } 1725 1726 .room-seckill .seckill-body .seckill-right .seckill-repost { 1727 background-color: #f0f0f0; 1728 padding: 20px; 1729 height: 260px 1730 } 1731 1732 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have { 1733 height: 60px; 1734 line-height: 60px 1735 } 1736 1737 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have .hava-tip { 1738 font-size: 14px; 1739 float: left 1740 } 1741 1742 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have .hava-tip .tip-big { 1743 font-size: 24px; 1744 margin-right: 5px 1745 } 1746 1747 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-have .have-right { 1748 float: right 1749 } 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: Arial 1756 } 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: -4px 1764 } 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: both 1772 } 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: right 1781 } 1782 1783 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-blue .progress-result { 1784 margin-right: 2px 1785 } 1786 1787 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-red { 1788 margin-top: -19px 1789 } 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-out 1806 } 1807 1808 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-will .progress-red .progress-red-right img { 1809 width: 5px; 1810 float: left 1811 } 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: 20px 1820 } 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: 15px 1828 } 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: 10px 1835 } 1836 1837 .room-seckill .seckill-body .seckill-right .seckill-repost .seckill-total .seckill-total-num { 1838 color: #ea3252 1839 } 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: pointer 1852 } 1853 1854 .repost-btn .img-repost { 1855 width: 252px; 1856 position: absolute; 1857 left: 18px; 1858 top: 18px 1859 } 1860 1861 .repost-btn .btn-bottom { 1862 background-color: #c11e3a; 1863 display: block; 1864 height: 6px; 1865 width: 100%; 1866 position: absolute; 1867 top: 84px 1868 } 1869 1870 .repost-btn:hover { 1871 text-decoration: none; 1872 background-color: #ff4464 1873 } 1874 1875 .repost-btn:hover .btn-bottom { 1876 background-color: #d92f4c 1877 } 1878 1879 .repost-btn:active { 1880 background-color: #da2646 1881 } 1882 1883 .repost-btn:active .btn-bottom { 1884 background-color: #b91431 1885 } 1886 1887 .room-fullsent { 1888 text-align: center 1889 } 1890 1891 .room-fullsent .fullsent-title { 1892 width: 932px 1893 } 1894 1895 .room-fullsent .fullsent-body { 1896 padding-top: 15px 1897 } 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 0 1906 } 1907 1908 .room-fullsent .fullsent-logo { 1909 margin-top: 15px 1910 } 1911 1912 .room-fullsent .fullsent-logo img { 1913 width: 1000px 1914 } 1915 1916 .room-fullsent .fullsent-container { 1917 width: 740px; 1918 height: 400px; 1919 margin: 0 auto; 1920 padding-top: 20px 1921 } 1922 1923 .room-fullsent .fullsent-container .fullsent-left { 1924 float: left 1925 } 1926 1927 .room-fullsent .fullsent-container .fullsent-left img { 1928 width: 355px; 1929 display: block; 1930 margin-bottom: 12px 1931 } 1932 1933 .room-fullsent .fullsent-container .fullsent-right { 1934 float: right; 1935 background-color: #f0f0f0; 1936 width: 295px; 1937 height: 350px; 1938 padding: 20px 1939 } 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: 14px 1949 } 1950 1951 .room-fullsent .fullsent-container .fullsent-right .fullsent-raw .raw-certify { 1952 color: #2b9c15 1953 } 1954 1955 .room-fullsent .fullsent-container .fullsent-right .fullsent-list { 1956 margin-top: 15px 1957 } 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: center 1967 } 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: 18px 1978 } 1979 1980 .room-fullsent .fullsent-container .fullsent-right .fullsent-list ul .list-m { 1981 margin: 0 10px 1982 } 1983 1984 .room-fullsent .fullsent-container .fullsent-right .fullsent-list ul .list-red { 1985 color: #ea3252 1986 } 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: pointer 1999 } 2000 2001 .fullsent-btn .btn-mouse { 2002 width: 244px; 2003 position: absolute; 2004 left: 18px; 2005 top: 18px 2006 } 2007 2008 .fullsent-btn .btn-bottom { 2009 background-color: #c11e3a; 2010 display: block; 2011 height: 6px; 2012 width: 100%; 2013 position: absolute; 2014 top: 84px 2015 } 2016 2017 .fullsent-btn .btn-text { 2018 margin-left: 10px 2019 } 2020 2021 .fullsent-btn:hover { 2022 text-decoration: none; 2023 background-color: #ff4464 2024 } 2025 2026 .fullsent-btn:hover .btn-bottom { 2027 background-color: #d92f4c 2028 } 2029 2030 .fullsent-btn:active { 2031 background-color: #da2646 2032 } 2033 2034 .fullsent-btn:active .btn-bottom { 2035 background-color: #b91431 2036 } 2037 2038 .fullsent-btn-disable { 2039 cursor: default; 2040 background-color: #ccc!important 2041 } 2042 2043 .fullsent-btn-disable .btn-bottom { 2044 background-color: #b3b3b3!important 2045 } 2046 2047 .fullsent-box.box-bottom { 2048 margin-top: 5px 2049 } 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: 1200px 2057 } 2058 2059 .container { 2060 width: 1200px!important; 2061 margin: 0 auto; 2062 position: relative 2063 } 2064 2065 .container .room-gua .gua { 2066 position: absolute 2067 } 2068 2069 .container .room-gua .gua01 { 2070 width: 50px; 2071 top: 382px; 2072 left: -35px 2073 } 2074 2075 .container .room-gua .gua02 { 2076 width: 50px; 2077 top: -21px; 2078 left: 230px 2079 } 2080 2081 .container .room-gua .gua03 { 2082 width: 50px; 2083 top: 249px; 2084 right: -61px 2085 } 2086 2087 .container .room-cloud .cloud { 2088 position: absolute 2089 } 2090 2091 .container .room-cloud .cloud01 { 2092 width: 218px; 2093 top: 40px; 2094 right: -400px 2095 } 2096 2097 .container .room-cloud .cloud011 { 2098 width: 218px; 2099 top: 40px; 2100 left: 50px 2101 } 2102 2103 .container .room-cloud .cloud02 { 2104 width: 138px; 2105 top: 140px; 2106 right: -400px 2107 } 2108 2109 .container .room-cloud .cloud03 { 2110 width: 187px; 2111 top: 460px; 2112 right: -400px 2113 } 2114 2115 .scale-half { 2116 position: relative; 2117 max-width: 50%; 2118 height: auto 2119 } 2120 2121 .room-more .room-more-img { 2122 width: 100%; 2123 margin-bottom: -4px 2124 } 2125 2126 .pop-content { 2127 font-size: 18px; 2128 line-height: 26px; 2129 margin-top: 30px; 2130 color: #000 2131 } 2132 2133 .room-red { 2134 color: #ea3252 2135 } 2136 2137 .rule-list { 2138 list-style-type: decimal; 2139 padding-left: 25px; 2140 line-height: 25px 2141 } 2142 2143 .room-ad img { 2144 display: block; 2145 width: 1000px; 2146 height: 80px; 2147 margin: 50px auto; 2148 background-color: #20cef3 2149 } 2150 2151 .room-footer { 2152 clear: both; 2153 margin-top: 100px; 2154 width: 100%; 2155 text-align: center 2156 } 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: none 2168 } 2169 2170 .nav-right .right-img { 2171 width: 129px 2172 } 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: 28px 2183 } 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!important 2191 } 2192 2193 .nav-right .right-item .right-link:hover { 2194 text-decoration: none!important; 2195 background-color: #516d8d 2196 } 2197 2198 .nav-right .item2 { 2199 top: 121px 2200 } 2201 2202 .nav-right .item3 { 2203 top: 149px 2204 } 2205 2206 .nav-right .item4 { 2207 top: 177px 2208 } 2209 2210 .nav-right .item5 { 2211 top: 205px 2212 } 2213 2214 .nav-right .item1 { 2215 top: 94px!important 2216 } 2217 2218 .nav-right .right-gotop { 2219 position: absolute; 2220 top: 246px; 2221 right: 56px 2222 }