.ocean
  - for x in (1..20)
      - for y in (1..20)
        .particle
View Compiled
$particle-varSize: 3;

$particle-color: #0ff;

$ocean-width: 100vmax;
$ocean-height: 100vmax;

$crest: 100px;
$trough: 100px;

body{
  background: #000;
  
  overflow: hidden;
  
  perspective: 100vmax;
}

.ocean{
  width: $ocean-width;
  height: $ocean-height;
  
  display: grid;
  
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(20, 1fr);
  
  transform-style: preserve-3d;
}
.particle{
  background: $particle-color;
  border-radius: 50% 50%;
  
  animation: float 5s ease infinite;
}

@for $x from 0 through 19 {
  @for $y from 1 through 20 {
    .particle:nth-child(#{$x*20 + $y}){
      animation-delay: -#{random(5000)}ms;
      $size: #{random($particle-varSize)}vmax;
      width: $size;
      height: $size;
    }
  }
}

@keyframes float{
  0%{
    transform: translate3d(0px, $trough, 0px);
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    transform: translate3d(0px, -$crest, 0px);
    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.