loading.css 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. body{background:#222;padding:0;margin:0;font:20px/1 Arial,'Simsun';overflow:hidden}
  2. #wrap{width:640px;/*box-shadow:10px -10px 10px #2A271C inset;*/position:absolute;top:-1000%;left:50%;margin:-480px 0 0 -320px;background:url('../images/wrap.jpg') #234997;background-size:100% 100%;/*border-radius:20px*/}
  3. #load{width:240px;height:240px;float:left;color:#fff;text-align:center;position:absolute;top:50%;left:50%;margin:-120px 0 0 -120px}
  4. #load p{position:absolute;bottom:0;left:-25%;width:150%;white-space:nowrap;display:none;}
  5. #load .p266{
  6. position:relative;
  7. top:-200px;
  8. display:block;
  9. width:146px;
  10. height:104px;
  11. margin:0 auto;
  12. border-radius:15px;
  13. }
  14. #load #percent{
  15. position:relative;
  16. top:68px;
  17. font-size:26px;
  18. letter-spacing: 2px;;
  19. color:#fff;
  20. font-family:fantasy;
  21. -webkit-transition: all 1s;
  22. transition: all 1s;
  23. }
  24. .grab{position:absolute;top:-1000%;left:0;}
  25. .spinner {
  26. width: 60px;
  27. height: 60px;
  28. -webkit-animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate;
  29. animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate;
  30. position:absolute;
  31. top:50%;
  32. left:50%;
  33. margin:-30px 0 0 -30px;
  34. }
  35. @-webkit-keyframes rotate {
  36. 0% {
  37. -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  38. transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  39. }
  40. 50% {
  41. -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  42. transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  43. }
  44. 100% {
  45. -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  46. transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  47. }
  48. }
  49. @keyframes rotate {
  50. 0% {
  51. -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  52. transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  53. }
  54. 50% {
  55. -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  56. transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  57. }
  58. 100% {
  59. -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  60. transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  61. }
  62. }
  63. @-webkit-keyframes background {
  64. 0% {
  65. background-color: #e33935;
  66. }
  67. 50% {
  68. background-color: #30addd;
  69. }
  70. 100% {
  71. background-color: #66b851;
  72. }
  73. }
  74. @keyframes background {
  75. 0% {
  76. background-color: #e33935;
  77. }
  78. 50% {
  79. background-color: #30addd;
  80. }
  81. 100% {
  82. background-color: #66b851;
  83. }
  84. }