pacman.css 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. @keyframes rotate_pacman_half_up {
  2. 0% {
  3. transform: rotate(270deg); }
  4. 50% {
  5. transform: rotate(360deg); }
  6. 100% {
  7. transform: rotate(270deg); } }
  8. @keyframes rotate_pacman_half_down {
  9. 0% {
  10. transform: rotate(90deg); }
  11. 50% {
  12. transform: rotate(0deg); }
  13. 100% {
  14. transform: rotate(90deg); } }
  15. @keyframes pacman-balls {
  16. 75% {
  17. opacity: 0.7; }
  18. 100% {
  19. transform: translate(-100px, -6.25px); } }
  20. .pacman {
  21. position: relative; }
  22. .pacman > div:nth-child(2) {
  23. animation: pacman-balls 1s -0.99s infinite linear; }
  24. .pacman > div:nth-child(3) {
  25. animation: pacman-balls 1s -0.66s infinite linear; }
  26. .pacman > div:nth-child(4) {
  27. animation: pacman-balls 1s -0.33s infinite linear; }
  28. .pacman > div:nth-child(5) {
  29. animation: pacman-balls 1s 0s infinite linear; }
  30. .pacman > div:first-of-type {
  31. width: 0px;
  32. height: 0px;
  33. border-right: 25px solid transparent;
  34. border-top: 25px solid #55595c;
  35. border-left: 25px solid #55595c;
  36. border-bottom: 25px solid #55595c;
  37. border-radius: 25px;
  38. animation: rotate_pacman_half_up 0.5s 0s infinite;
  39. position: relative;
  40. left: -30px; }
  41. .pacman > div:nth-child(2) {
  42. width: 0px;
  43. height: 0px;
  44. border-right: 25px solid transparent;
  45. border-top: 25px solid #55595c;
  46. border-left: 25px solid #55595c;
  47. border-bottom: 25px solid #55595c;
  48. border-radius: 25px;
  49. animation: rotate_pacman_half_down 0.5s 0s infinite;
  50. margin-top: -50px;
  51. position: relative;
  52. left: -30px; }
  53. .pacman > div:nth-child(3),
  54. .pacman > div:nth-child(4),
  55. .pacman > div:nth-child(5),
  56. .pacman > div:nth-child(6) {
  57. background-color: #55595c;
  58. width: 15px;
  59. height: 15px;
  60. border-radius: 100%;
  61. margin: 2px;
  62. width: 10px;
  63. height: 10px;
  64. position: absolute;
  65. transform: translate(0, -6.25px);
  66. top: 25px;
  67. left: 70px; }