.rotate-c
.rotate-o
View Compiled
@function multiple-shadow ($n) {
$value: 0 4px 0 4px #eee;
$color: #eee;
@for $i from 2 through $n {
@if $i % 2 == 0 {
$color: #eee;
} @else {
$color: #292929;
}
$value: '#{$value} , 0 #{$i * 4}px 0 #{$i * 8}px ' + $color;
}
@return unquote($value);
}
body {
background: black url('http://fay.io/e/vosBF/stars.jpg') repeat;
}
.rotate-c {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 500px;
height: 500px;
margin: auto;
border-radius: 999px;
background-color: #eee;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
animation: spin-bob 2.5s linear infinite;
box-shadow: 0 0 100px 0 rgba(255,255,255,.4);
}
.rotate-o {
position: absolute;
top: 125px;
left: 50%;
width: 10px;
height: 10px;
border-radius: 1em;
background-color: #eee;
margin-left: -5px;
box-shadow: multiple-shadow(30);
}
@keyframes spin-bob {
0% {
transform: rotate(0deg) scale(.95) translate3d(0, 10px, 0);
}
50% {
transform: rotate(180deg) scale(1.05) translate3d(0, -10px, 0);
}
100% {
transform: rotate(360deg) scale(.95) translate3d(0, 10px, 0);
}
}
View Compiled
// Inspired by The Twilight Zone's
// http://fay.io/e/vosBF/spiral-of-madness.gif
This Pen doesn't use any external CSS resources.