Advertisement
powylv

falling butterflies bg

Jul 10th, 2022 (edited)
557
2
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.58 KB | None | 2 0
  1. <style>
  2. .butterfly {
  3. position: fixed;
  4. top: -20%;
  5. -webkit-user-select: none;
  6. -moz-user-select: none;
  7. -ms-user-select: none;
  8. user-select: none;
  9. cursor: default;
  10. -webkit-animation-name: butterflies-fall, butterflies-shake;
  11. -webkit-animation-duration: 10s, 3s;
  12. -webkit-animation-timing-function: linear, ease-in-out;
  13. -webkit-animation-iteration-count: infinite, infinite;
  14. -webkit-animation-play-state: running, running;
  15. animation-name: butterflies-fall, butterflies-shake;
  16. animation-duration: 10s, 3s;
  17. animation-timing-function: linear, ease-in-out;
  18. animation-iteration-count: infinite, infinite;
  19. animation-play-state: running, running
  20. }
  21.  
  22. .butterfly:nth-of-type(0) {
  23. left: 1%;
  24. -webkit-animation-delay: 0s, 0s;
  25. animation-delay: 0s, 0s
  26. }
  27.  
  28. .butterfly:nth-of-type(1) {
  29. left: 10%;
  30. -webkit-animation-delay: 1s, 1s;
  31. animation-delay: 1s, 1s
  32. }
  33.  
  34. .butterfly:nth-of-type(2) {
  35. left: 20%;
  36. -webkit-animation-delay: 6s, .5s;
  37. animation-delay: 6s, .5s
  38. }
  39.  
  40. .butterfly:nth-of-type(3) {
  41. left: 30%;
  42. -webkit-animation-delay: 4s, 2s;
  43. animation-delay: 4s, 2s
  44. }
  45.  
  46. .butterfly:nth-of-type(4) {
  47. left: 40%;
  48. -webkit-animation-delay: 2s, 2s;
  49. animation-delay: 2s, 2s
  50. }
  51.  
  52. .butterfly:nth-of-type(5) {
  53. left: 50%;
  54. -webkit-animation-delay: 8s, 3s;
  55. animation-delay: 8s, 3s
  56. }
  57.  
  58. .butterfly:nth-of-type(6) {
  59. left: 60%;
  60. -webkit-animation-delay: 6s, 2s;
  61. animation-delay: 6s, 2s
  62. }
  63.  
  64. .butterfly:nth-of-type(7) {
  65. left: 70%;
  66. -webkit-animation-delay: 2.5s, 1s;
  67. animation-delay: 2.5s, 1s
  68. }
  69.  
  70. .butterfly:nth-of-type(8) {
  71. left: 80%;
  72. -webkit-animation-delay: 1s, 0s;
  73. animation-delay: 1s, 0s
  74. }
  75.  
  76. .butterfly:nth-of-type(9) {
  77. left: 90%;
  78. -webkit-animation-delay: 3s, 1.5s;
  79. animation-delay: 3s, 1.5s
  80. }
  81.  
  82. .butterfly:nth-of-type(10) {
  83. left: 25%;
  84. -webkit-animation-delay: 2s, 0s;
  85. animation-delay: 2s, 0s
  86. }
  87.  
  88. .butterfly:nth-of-type(11) {
  89. left: 65%;
  90. -webkit-animation-delay: 4s, 2.5s;
  91. animation-delay: 4s, 2.5s
  92. }
  93.  
  94. @-webkit-keyframes butterflies-fall {
  95. 0% {
  96. top:-20%
  97. }
  98. 100% {
  99. top:100%
  100. }
  101. }
  102. @keyframes butterflies-fall {
  103. 0% {
  104. top:-20%
  105. }
  106. 100% {
  107. top:100%
  108. }
  109. }
  110.  
  111. @-webkit-keyframes butterflies-shake {
  112. 0%,100% {
  113. -webkit-transform: translateX(0);
  114. transform: translateX(0)
  115. }
  116. 50% {
  117. -webkit-transform: translateX(80px);
  118. transform: translateX(80px)
  119. }
  120. }
  121. @keyframes butterflies-shake {
  122. 0%,100% {
  123. transform: translateX(0)
  124. }
  125. 50% {
  126. transform: translateX(80px)
  127. }
  128. }
  129. </style>
  130.  
  131. <div class="butterflies" aria-hidden="true">
  132. <div class="butterfly">
  133. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  134. </div>
  135. <div class="butterfly">
  136. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  137. </div>
  138. <div class="butterfly">
  139. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  140. </div>
  141. <div class="butterfly">
  142. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  143. </div>
  144. <div class="butterfly">
  145. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  146. </div>
  147. <div class="butterfly">
  148. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  149. </div>
  150. <div class="butterfly">
  151. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  152. </div>
  153. <div class="butterfly">
  154. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  155. </div>
  156. <div class="butterfly">
  157. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  158. </div>
  159. <div class="butterfly">
  160. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  161. </div>
  162. <div class="butterfly">
  163. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  164. </div>
  165. <div class="butterfly">
  166. <img src= "https://media.everskies.com/LgH5vxydH9Gk4DCrcwIy.png">
  167. </div>
  168. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement