svgstyles.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. .st0 {
  2. fill: #68e1fd
  3. }
  4. .st1 {
  5. fill: #093f68
  6. }
  7. .st2 {
  8. fill: #fff
  9. }
  10. .st3 {
  11. fill: #f56132
  12. }
  13. .st4 {
  14. fill: #dfeaef
  15. }
  16. .st5 {
  17. fill: #ffbc0e
  18. }
  19. .st6 {
  20. fill: #70cc40
  21. }
  22. .st0-c {
  23. fill: #fff
  24. }
  25. .st1-c {
  26. fill: #152837
  27. }
  28. .st2-c {
  29. fill: #ffc9b0
  30. }
  31. .st3-c {
  32. fill: #0172ad
  33. }
  34. .st5-c {
  35. fill: #dfeaef
  36. }
  37. #panel-small, #panel-big, #cursor {
  38. animation-duration: 3s;
  39. animation-iteration-count: infinite;
  40. }
  41. #panel-small {
  42. animation-name: move;
  43. }
  44. #panel-big {
  45. animation-name: move-right;
  46. }
  47. #cursor {
  48. animation-name: cursor-click;
  49. animation-duration: 4s;
  50. }
  51. @keyframes move {
  52. 0%, 100% {
  53. transform: translateX(0);
  54. }
  55. 50% {
  56. transform: translateX(-30px);
  57. }
  58. }
  59. @keyframes move-right {
  60. 0%, 100% {
  61. transform: translateX(0);
  62. }
  63. 50% {
  64. transform: translateX(30px);
  65. }
  66. }
  67. @keyframes cursor-click {
  68. 0% {
  69. transform: translateX(0);
  70. }
  71. 40% {
  72. transform: translateX(38px);
  73. }
  74. 60% {
  75. transform: scale(1.2, 1.11);
  76. }
  77. 100% {
  78. transform: translateX(0);
  79. }
  80. }
  81. #message {
  82. animation: move-top 3s infinite;
  83. }
  84. @keyframes move-top {
  85. 0% { transform: translateY(0); }
  86. 50% { transform: translateY(-50px); }
  87. 100% { transform: translateY(0); }
  88. }