$n: 180;
html, body{
width: 100%;
height: 100%;
float: left;
overflow-x: hidden;
background: #222;
}
header{
position: fixed;
text-align: center;
width: 100%;
height: 300px;
background: #333;
color: #fff;
}
.scroll{
width: 100%;
height: 0;
top: 0;
width: 50%;
height: 50%;
max-height: 200px;
max-width: 200px;
overflow: hidden;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(1.2);
position: absolute;
.block{
width: 10px;
height: 10px;
float: left;
background: rebeccapurple;
display: block;
margin: 2px;
transition: transform 1s ease;
animation: pump 3s ease infinite;
position: relative;
@for $i from 0 through $n {
&:nth-child(#{($i)}){
animation: pump 1s linear $i/14.5+s infinite;
}
}
}
}
.space{
height: 1000px;
display: block;
}
@keyframes pump{
33%{
border-radius: 100%;
background: rebeccapurple;
}
66%{
transform: scale(.2);
background: #fff;
box-shadow: 0 0 0 6px black;
}
100%{
transform: rotate(90deg);
//filter: invert(100%);
}
}