style body min height 300px ball position absolute border radius 100 opacity 0 1 style script Some random colors const colors 3CC157 2AA7FF 1B1B1B FCBC0F F85F36 const numBalls 50 const balls for let i 0 i numBalls i let ball document createElement div ball classList add ball ball style background colors Math floor Math random colors length ball style left Math floor Math random 100 vw ball style top Math floor Math random 100 vh ball style transform scale Math random ball style width Math random em ball style height ball style width balls push ball document body append ball Keyframes balls forEach el i ra let to x Math random i 2 0 11 11 y Math random 12 let anim el animate transform translate 0 0 transform translate to x rem to y rem duration Math random 5 2000 random duration direction alternate fill both iterations Infinity easing ease in out script div class area ul class circles li li li li li li li li li li li li li li li li li li li li ul div style import url https fonts googleapis com css family Exo 400 700 margin 0px padding 0px body font family Exo sans serif min height 500px context width 100 position absolute top 50vh context h1 text align center color fff font size 50px area background 4e54c8 background webkit linear gradient to left 8f94fb 4e54c8 width 100 height 100vh circles position absolute top 0 left 0 width 100 height 100 overflow hidden circles li position absolute display block list style none width 20px height 20px background rgba 255 255 255 0 2 animation animate 25s linear infinite bottom 150px circles li nth child 1 left 25 width 80px height 80px animation delay 0s circles li nth child 2 left 10 width 20px height 20px animation delay 2s animation duration 12s circles li nth child 3 left 70 width 20px height 20px animation delay 4s circles li nth child 4 left 40 width 60px height 60px animation delay 0s animation duration 18s circles li nth child 5 left 65 width 20px height 20px animation delay 0s circles li nth child 6 left 75 width 110px height 110px animation delay 3s circles li nth child 7 left 35 width 150px height 150px animation delay 7s circles li nth child 8 left 50 width 25px height 25px animation delay 15s animation duration 45s circles li nth child 9 left 20 width 15px height 15px animation delay 2s animation duration 35s circles li nth child 10 left 85 width 150px height 150px animation delay 0s animation duration 11s keyframes animate 0 transform translateY 0 rotate 0deg opacity 1 border radius 0 100 transform translateY 1000px rotate 720deg opacity 0 border radius 50 style
area background 4e54c8 background webkit linear gradient to left 8f94fb 4e54c8 width 100 height 100vh circles position absolute top 0 left 0 width 100 height 100 overflow hidden circles li position absolute display block list style none width 20px height 20px background rgba 255 255 255 0 2 animation animate 25s linear infinite bottom 150px circles li nth child 1 left 25 width 80px height 80px animation delay 0s circles li nth child 2 left 10 width 20px height 20px animation delay 2s animation duration 12s circles li nth child 3 left 70 width 20px height 20px animation delay 4s circles li nth child 4 left 40 width 60px height 60px animation delay 0s animation duration 18s circles li nth child 5 left 65 width 20px height 20px animation delay 0s circles li nth child 6 left 75 width 110px height 110px animation delay 3s circles li nth child 7 left 35 width 150px height 150px animation delay 7s circles li nth child 8 left 50 width 25px height 25px animation delay 15s animation duration 45s circles li nth child 9 left 20 width 15px height 15px animation delay 2s animation duration 35s circles li nth child 10 left 85 width 150px height 150px animation delay 0s animation duration 11s keyframes animate 0 transform translateY 0 rotate 0deg opacity 1 border radius 0 100 transform translateY 1000px rotate 720deg opacity 0 border radius 50 style