Advertisement
powylv

kyomoto // background

Oct 21st, 2022 (edited)
987
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.71 KB | None | 0 0
  1. <style>
  2. .background {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. bottom: 0;
  7. right: 0;
  8. overflow: hidden;
  9. }
  10.  
  11. .background span {
  12. width: 40vmin;
  13. height: 40vmin;
  14. border-radius: 20vmin;
  15. backface-visibility: hidden;
  16. position: absolute;
  17. animation-name: move;
  18. animation-duration: 6s;
  19. animation-timing-function: linear;
  20. animation-iteration-count: infinite;
  21. }
  22. .background span:nth-child(1) {
  23. color: #FAE0E8;
  24. top: 39%;
  25. left: 27%;
  26. animation-duration: 12.8s;
  27. animation-delay: -13.7s;
  28. transform-origin: 6vw -9vh;
  29. box-shadow: -40vmin 0 5.009616418vmin currentColor;
  30. }
  31. .background span:nth-child(2) {
  32. color: #E8E1EE;
  33. top: 93%;
  34. left: 75%;
  35. animation-duration: 11.2s;
  36. animation-delay: -1.6s;
  37. transform-origin: -16vw 7vh;
  38. box-shadow: -40vmin 0 7.4277373741vmin currentColor;
  39. }
  40. .background span:nth-child(3) {
  41. color: #FFFFFF;
  42. top: 79%;
  43. left: 74%;
  44. animation-duration: 11.1s;
  45. animation-delay: -1.4s;
  46. transform-origin: -14vw 13vh;
  47. box-shadow: 40vmin 0 10.5566948409vmin currentColor;
  48. }
  49. .background span:nth-child(4) {
  50. color: #FAE0E8;
  51. top: 27%;
  52. left: 65%;
  53. animation-duration: 10.5s;
  54. animation-delay: -10.3s;
  55. transform-origin: 15vw -5vh;
  56. box-shadow: 40vmin 0 14.5287386636vmin currentColor;
  57. }
  58. .background span:nth-child(5) {
  59. color: #E8E1EE;
  60. top: 40%;
  61. left: 87%;
  62. animation-duration: 11.7s;
  63. animation-delay: -12.5s;
  64. transform-origin: -6vw 12vh;
  65. box-shadow: 40vmin 0 14.0437486596vmin currentColor;
  66. }
  67. .background span:nth-child(6) {
  68. color: #FFFFFF;
  69. top: 12%;
  70. left: 27%;
  71. animation-duration: 11.7s;
  72. animation-delay: -3.6s;
  73. transform-origin: 8vw -17vh;
  74. box-shadow: -40vmin 0 8.8226591104vmin currentColor;
  75. }
  76. .background span:nth-child(7) {
  77. color: #FAE0E8;
  78. top: 30%;
  79. left: 24%;
  80. animation-duration: 10.3s;
  81. animation-delay: -15.7s;
  82. transform-origin: 0vw -19vh;
  83. box-shadow: -40vmin 0 6.8918709005vmin currentColor;
  84. }
  85. .background span:nth-child(8) {
  86. color: #E8E1EE;
  87. top: 48%;
  88. left: 48%;
  89. animation-duration: 10.2s;
  90. animation-delay: -10.4s;
  91. transform-origin: 10vw -24vh;
  92. box-shadow: -40vmin 0 7.5512122265vmin currentColor;
  93. }
  94. .background span:nth-child(9) {
  95. color: #FFFFFF;
  96. top: 73%;
  97. left: 28%;
  98. animation-duration: 10.3s;
  99. animation-delay: -10.3s;
  100. transform-origin: -13vw 18vh;
  101. box-shadow: -40vmin 0 14.6182025673vmin currentColor;
  102. }
  103. .background span:nth-child(10) {
  104. color: #FAE0E8;
  105. top: 2%;
  106. left: 6%;
  107. animation-duration: 16s;
  108. animation-delay: -7.3s;
  109. transform-origin: -6vw -12vh;
  110. box-shadow: -40vmin 0 13.7729871267vmin currentColor;
  111. }
  112.  
  113. @keyframes move {
  114. 100% {
  115. transform: translate3d(0, 0, 1px) rotate(360deg);
  116. }
  117. }
  118. </style>
  119.  
  120. <div class="background">
  121. <span></span>
  122. <span></span>
  123. <span></span>
  124. <span></span>
  125. <span></span>
  126. <span></span>
  127. <span></span>
  128. <span></span>
  129. <span></span>
  130. <span></span>
  131. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement