.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.