.canvas
  - (1..50).each do
    .bubble
View Compiled
random(min,max)
  return floor(math(0, 'random')*(max - min + 1) + min)

randomT(min,max)
  return floor(math(0, 'random')*(max - min + 1) + min)s

.canvas
  height 100vh
  width 100vw
  background: linear-gradient(to bottom, #edfffa 0%,#31c5d6 100%)
  position relative
  overflow hidden

.bubble
  display block

  border-radius: 100%
  opacity: .8
  position absolute

for $i in (1..50)
  
  $bgpos = $i % 2 == 0 ? top right : center

  .bubble
    &:nth-child({$i})
      background: radial-gradient(ellipse at $bgpos, #b8c6c6 0%,#30b3d3 46%,#20628c 100%)
      width: random(5, 100)px
      height: @width
      left: random(1, 100)vw
      bottom: random(1, 100)vh
      animation move+$i infinite randomT(3, 15)

  @keyframes move{$i}
    0%
      bottom: -100px

    100%
      bottom: random(0, 100)vh
      transform: translate(random(-100, 200)px, 0)
      opacity 0
    
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.