loading18.css 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. .spinner18 {
  2. display: inline-block;
  3. width: 40px;
  4. height: 40px;
  5. position: relative;
  6. text-align: center;
  7. -webkit-animation: sk-rotate 2.0s infinite linear;
  8. animation: sk-rotate 2.0s infinite linear;
  9. }
  10. .dot1,
  11. .dot2 {
  12. width: 60%;
  13. height: 60%;
  14. display: inline-block;
  15. position: absolute;
  16. top: 0;
  17. background-color: #42b983; //可修改颜色
  18. border-radius: 100%;
  19. -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  20. animation: sk-bounce 2.0s infinite ease-in-out;
  21. }
  22. .dot2 {
  23. top: auto;
  24. bottom: 0;
  25. -webkit-animation-delay: -1.0s;
  26. animation-delay: -1.0s;
  27. }
  28. @-webkit-keyframes sk-rotate {
  29. 100% {
  30. -webkit-transform: rotate(360deg)
  31. }
  32. }
  33. @keyframes sk-rotate {
  34. 100% {
  35. transform: rotate(360deg);
  36. -webkit-transform: rotate(360deg)
  37. }
  38. }
  39. @-webkit-keyframes sk-bounce {
  40. 0%,
  41. 100% {
  42. -webkit-transform: scale(0.0)
  43. }
  44. 50% {
  45. -webkit-transform: scale(1.0)
  46. }
  47. }
  48. @keyframes sk-bounce {
  49. 0%,
  50. 100% {
  51. transform: scale(0.0);
  52. -webkit-transform: scale(0.0);
  53. }
  54. 50% {
  55. transform: scale(1.0);
  56. -webkit-transform: scale(1.0);
  57. }
  58. }