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