ball-rotate.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes rotate {
  5. 0% {
  6. transform: rotate(0deg);
  7. }
  8. 50% {
  9. transform: rotate(180deg);
  10. }
  11. 100% {
  12. transform: rotate(360deg);
  13. }
  14. }
  15. @keyframes rotate {
  16. 0% {
  17. transform: rotate(0deg);
  18. }
  19. 50% {
  20. transform: rotate(180deg);
  21. }
  22. 100% {
  23. transform: rotate(360deg);
  24. }
  25. }
  26. .ball-rotate {
  27. position: relative;
  28. }
  29. .ball-rotate > div {
  30. background-color: #b8c2cc;
  31. width: 15px;
  32. height: 15px;
  33. border-radius: 100%;
  34. margin: 2px;
  35. -webkit-animation-fill-mode: both;
  36. animation-fill-mode: both;
  37. position: relative;
  38. }
  39. .ball-rotate > div:first-child {
  40. -webkit-animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  41. animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  42. }
  43. .ball-rotate > div:before,
  44. .ball-rotate > div:after {
  45. background-color: #b8c2cc;
  46. width: 15px;
  47. height: 15px;
  48. border-radius: 100%;
  49. margin: 2px;
  50. content: "";
  51. position: absolute;
  52. opacity: 0.8;
  53. }
  54. .ball-rotate > div:before {
  55. top: 0px;
  56. left: -28px;
  57. }
  58. .ball-rotate > div:after {
  59. top: 0px;
  60. left: 25px;
  61. }