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 }
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
