Advertisement
FiringBlanks

Circles CSS Animation

Jul 1st, 2022
978
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.62 KB | None
  1.  
  2. .circles{
  3.     position: absolute;
  4.     top: 0;
  5.     left: 0;
  6.     width: 100%;
  7.     height: 100%;
  8.     overflow: hidden;
  9.     margin-top: 0px;
  10. }
  11.  
  12. .circles li{
  13.     position: absolute;
  14.     display: block;
  15.     list-style: none;
  16.     width: 20px;
  17.     height: 20px;
  18.     background: rgba(255, 255, 255, 0.2);
  19.     animation: animate 25s linear infinite;
  20.     bottom: -150px;
  21.    
  22. }
  23.  
  24. .circles li:nth-child(1){
  25.     left: 25%;
  26.     width: 80px;
  27.     height: 80px;
  28.     animation-delay: 0s;
  29. }
  30.  
  31.  
  32. .circles li:nth-child(2){
  33.     left: 10%;
  34.     width: 20px;
  35.     height: 20px;
  36.     animation-delay: 2s;
  37.     animation-duration: 12s;
  38. }
  39.  
  40. .circles li:nth-child(3){
  41.     left: 70%;
  42.     width: 20px;
  43.     height: 20px;
  44.     animation-delay: 4s;
  45. }
  46.  
  47. .circles li:nth-child(4){
  48.     left: 40%;
  49.     width: 60px;
  50.     height: 60px;
  51.     animation-delay: 0s;
  52.     animation-duration: 18s;
  53. }
  54.  
  55. .circles li:nth-child(5){
  56.     left: 65%;
  57.     width: 20px;
  58.     height: 20px;
  59.     animation-delay: 0s;
  60. }
  61.  
  62. .circles li:nth-child(6){
  63.     left: 75%;
  64.     width: 110px;
  65.     height: 110px;
  66.     animation-delay: 22s;
  67. }
  68.  
  69. .circles li:nth-child(7){
  70.     left: 35%;
  71.     width: 150px;
  72.     height: 150px;
  73.     animation-delay: 7s;
  74. }
  75.  
  76. .circles li:nth-child(8){
  77.     left: 50%;
  78.     width: 25px;
  79.     height: 25px;
  80.     animation-delay: 15s;
  81.     animation-duration: 45s;
  82. }
  83.  
  84. .circles li:nth-child(9){
  85.     left: 20%;
  86.     width: 15px;
  87.     height: 15px;
  88.     animation-delay: 2s;
  89.     animation-duration: 35s;
  90. }
  91.  
  92. .circles li:nth-child(10){
  93.     left: 85%;
  94.     width: 150px;
  95.     height: 150px;
  96.     animation-delay: 0s;
  97.     animation-duration: 11s;
  98. }
  99.  
Advertisement
RAW Paste Data Copied
Advertisement