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