Skip to content

Instantly share code, notes, and snippets.

@nblenke
Created August 31, 2016 18:42
Show Gist options
  • Save nblenke/c46738fae1f369992b49ac98f7c017bd to your computer and use it in GitHub Desktop.
Save nblenke/c46738fae1f369992b49ac98f7c017bd to your computer and use it in GitHub Desktop.
CSS Reaction
<div class="circles">
<div></div>
<div></div>
<div></div>
<span></span>
</div>
$width: 333px;
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #2A2C2E;
}
.circles {
width: $width;
height: $width;
position: relative;
perspective: 50000px;
color: #61DAFB;
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 18.4%;
height: 18.4%;
border-radius: 100%;
background: currentColor;
}
div {
position: absolute;
width: 100%;
height: 100%;
border-left:
$width / 25 solid;
border-top:
$width / 25 solid transparent;
border-radius: 100%;
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
animation: anim-#{$i} 1s linear infinite;
}
}
}
}
@for $i from 1 through 3 {
@keyframes anim-#{$i} {
from {
transform:
rotateZ(360deg / 3 * $i)
rotateX(66deg)
rotateZ(0deg);
}
to {
transform:
rotateZ(360deg / 3 * $i)
rotateX(66deg)
rotateZ(360deg);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment