.wrap
.items
- (1..12).each do |i|
.item= i.even? ? "O" : "I"
.header T CK
View Compiled
@import "compass/css3";
$color-bg: skyblue;
$color-text-active: darken($color-bg, 40%);
$color-text-faded: darken($color-bg, 8%);
$items-count : 12;
$wrap-size : 20em;
$item-size : 2em;
$half-item : $item-size / 2;
$half-wrap : $wrap-size / 2;
body,
html { min-width: 100%; }
html {
background: skyblue;
font: {
family: monospace;
}
width: 100%;
}
.wrap {
background: white;
border-radius: 50% 50%;
height: 20em;
margin: 15em auto 0;
position: relative;
width: 20em;
@include box-shadow(0 0 0 4em rgba(255, 255, 255, 0.6));
}
.header {
background: lightblue;
border-radius: 1em;
color: $color-text-active;
font-size: 4em;
line-height: 1;
margin-left: -0.5em;
padding: 0.5em 0;
position: absolute;
top: -2.5em;
left: 50%;
text-align: center;
width: 1em;
word-wrap: break-word;
}
.items {
height: #{$wrap-size};
margin: 0 auto;
position: relative;
z-index: 2;
width: #{$wrap-size};
transform: rotate(-60deg);
animation: {
name: ticktock;
duration: 12s;
iteration-count: infinite;
// Something changed, and now you no longer need steps()
//timing-function: steps(12), cubic-bezier(0,1,0.4,1);
timing-function: cubic-bezier(0,1,0.4,1);
}
}
.item {
color: $color-text-faded;
display: block;
font-size: 4em;
line-height: 1;
height: $item-size;
margin: -$half-item;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
text-align: center;
width: $item-size;
$angle: 360 / $items-count;
$rotation: 0;
@for $i from 1 to $items-count+1 {
$delay: $i - 1;
&:nth-of-type(#{$i}) {
animation-delay: #{$delay}s;
@include transform(rotate(#{$rotation}deg) translate($half-wrap/4) rotate(90deg));
}
$rotation: $rotation + $angle;
}
animation: {
name: activate;
duration: 12s;
iteration-count: infinite;
// Something changed, and now you no longer need steps()
//timing-function: steps(12, end), cubic-bezier(0,1,0.4,1);
timing-function: cubic-bezier(0,1,0.4,1);
}
}
@keyframes ticktock {
@for $i from 0 through 100 {
#{$i * 8.33%} {
$rotate: $i * 30;
$rotate: $rotate + 60;
transform: rotate(-#{$rotate}deg);
}
}
to {
transform: rotate(-60deg);
}
}
@keyframes activate {
0% { color: $color-text-active; }
8% { color: $color-text-active; }
11% { color: $color-text-faded; }
}
View Compiled
This Pen doesn't use any external CSS resources.