Skip to content

Instantly share code, notes, and snippets.

@jose-guerra
Created March 6, 2019 22:12
Show Gist options
  • Save jose-guerra/f9934f9a0cd4033fd5129b5cdd0b521e to your computer and use it in GitHub Desktop.
Save jose-guerra/f9934f9a0cd4033fd5129b5cdd0b521e to your computer and use it in GitHub Desktop.
Circles V2
.a
.a__1
.a__2
.a__3
.a__4
.a__5
.a__6
.a__7
.a__8
.a__9
.a__10
.a__11
.a__12
.a__13
.a__14
.a__15
.a__16
.a__17
.a__18
.a__19
.a__20
@mixin m($w) {
width: $w;
height: $w;
margin-top: -$w / 2;
margin-left: -$w / 2;
}
@mixin p($w) {
top: $w;
left: $w;
width: $w;
height: $w;
margin-top: -$w;
margin-left: -$w;
transform-origin: center;
}
.a {
@include m(400px);
position: absolute;
top: 50%;
left: 50%;
border: 2px solid #ff1744;
border-radius: 50%;
animation: r 10s linear infinite;
@for $i from 1 through 20 {
.a__#{$i} {
@extend .a;
@include p(400px - ($i * 15));
}
}
}
@keyframes r {
to {
transform: rotate(360deg);
}
}
body {
overflow: hidden;
background: #231231;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment