- var n = 0
.container
  while n < 120
    div.shape
    - n++
View Compiled
@bgColor: #D24D57;

.makeRandom(@min: 0, @max: @min+1, @int: 0) { 
  .checkInt() {
    @getNum: `Math.random() * (@{max} - @{min} + @{int})`;
    @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
  }

  .checkInt();
  @randNum: @base + @min;
}



.item-loop(@items, @delay) {
  .loop(0);  
  .loop(@index) when (@index <= @items) {
    &:nth-child(@{index}) {
      -webkit-animation-delay: unit((@index * @delay),s);
        animation-delay: unit((@index * @delay),s);
        .rand1{
            .makeRandom(0, 100);
            top: unit((@randNum), vh);
        }

        .rand2{
          .makeRandom(0, 100);
          left: unit((@randNum), vw);
          //background: saturate(@bgColor,unit((@randNum), %));
          background: hsla(@randNum, 80%,65%, 1);
          
        }
        .rand3{
          .makeRandom(20, 360);
          width: unit((@randNum), px);
          height: unit((@randNum), px);
          //border-radius: unit((@randNum), %);
          
        }
      
      .rand4{
        .makeRandom(5, 20);
        box-shadow: 0 0 unit((@randNum), px) 0 fade(#000, 20%);
        
       
      }
      
      .rand5{
        .makeRandom();
      -webkit-animation-delay: unit((@index * @delay *@randNum),s);
        animation-delay: unit((@index * @delay *@randNum),s); 
         //opacity: unit((@randNum));
      }
      
        .rand1();
        .rand2();
        .rand3();
        .rand4();
        .rand5();

    }

    .loop(@index + 1);
  }
}


@numitems: 120;
@delay: 0.2;
@pix: 20;

body{
  background: #81CFE0;
  overflow: hidden;

}

.container{
  position: absolute;
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
  width: 480px;
  height: 640px;
  overflow: hidden;
  border: 40px solid #343434;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #000;
  background: @bgColor;
}

.shape{
  position: absolute;
  width: 20px;
  height: 20px;
  background: fade(#fff, 70%);
  border-radius: 50%;
  .item-loop(@numitems, @delay);
  -webkit-animation: youpi 15s infinite;
  animation: youpi 15s infinite;
}


@-webkit-keyframes youpi{
  0%{
 
    
  }
  
  25%{
  
    
  }
  
  50%{
    
    transform: scale(2);
  }
  
  75%{
  
     
  }
  
  100%{
 
  }
}

@keyframes youpi{
  0%{
 
    
  }
  
  25%{
  
    
  }
  
  50%{
    
    transform: scale(2);
  }
  
  75%{
  
     
  }
  
  100%{
 
  }
}

@media all and (max-width: 680px){
  .container{
    width: 280px;
    height: 480px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.