Rainbow Gears

index.html

.clock
	.clock__mask
	.gears
		.gear--standard
			- (0..8).each do |i|
				.gear__peg
		.gear--reverse
			- (0..8).each do |i|
				.gear__peg
		.gear--large
			- (0..12).each do |i|
				.gear__peg--large
	.gears
		.gear--large.cornered
			- (0..12).each do |i|
				.gear__peg--large
		.gear--large.cornered
			- (0..12).each do |i|
				.gear__peg--large

Rainbow Gears.markdown

Rainbow Gears

Some Spinning gears just for fun

A Pen by William Anderson on CodePen.

License.

script.js

# Some spinning gears, just for fun

style.css

// Frameworks & Mixins
// ---------------------------
@import bourbon
	
=block($w, $h)
	display: block
	width: $w
	height: $h

=font($s, $lh)
	font-size: $s + 'px'
	line-height: $lh + 'px'

// layout Styles
// ---------------------------
body
	background: black

.clock
	+block(100px, 100px)
	position: absolute
	top: 50%
	left: 50%
	+transform(translateX(-50%) translateY(-50%))
	
.gears
	+block(100px, 100px)
	position: absolute
	top: 0px
	left: 0px
	opacity: 0.7

.gears+.gears
	opacity: 1.0

 
// gear Styles
// ---------------------------
.gear
	+block(50px, 50px)
	float: left
	background: blue
	border-radius: 50%
	position: relative
	

	&:before
		content: ''
		+block(10px, 10px)
		position: absolute
		top: 50%
		left: 50%
		border-radius: 50%
		z-index: 200
		+transform(translateX(-50%) translateY(-50%))
		+animation(rainbow 20.0s linear)
		+animation-iteration-count(infinite)

	
	&:after
		content: ''
		+block(30px, 30px)
		background: black
		position: absolute
		top: 50%
		left: 50%
		+transform(translateX(-50%) translateY(-50%))
		border-radius: 50%
	
.gear--standard
	@extend .gear
	+animation(spin 3.0s linear, rainbow 20.0s linear)
	+animation-iteration-count(infinite)
	opacity: 0.55
	
.gear--reverse
	@extend .gear
	+animation(spin_back 3.0s linear, rainbow 20.0s linear)
	+animation-iteration-count(infinite)
	
.gear--large
	@extend .gear
	+block(80px, 80px)
	+animation(spin 4.5s linear, rainbow 20.0s linear)
	+animation-iteration-count(infinite)
	&:after
		+block(55px, 55px)
	&.cornered
		top: -40px
		left: 60px
	
	&.cornered+.cornered
		top: -37px
		left: 69px
		+animation(spin_back 4.5s linear, rainbow 20.0s linear)
		+animation-iteration-count(infinite)
		

.gear__peg
	+block(12px, 30px)
	background: blue
	position: absolute
	top: 0px
	left: 50%
	margin-top: -5px
	margin-left: -6px
	+animation(rainbow 20.0s linear)
	+animation-iteration-count(infinite)

.gear__peg--large
	@extend .gear__peg
	+block(12px, 45px)

$peg_count: 9
@for $i from 1 through $peg_count
	.gear__peg:nth-child(#{$i})
		+transform-origin(bottom center)
		+transform(rotate(#{$i*(360/$peg_count)}deg))
	
$peg_count: 12
@for $i from 1 through $peg_count
	.gear__peg--large:nth-child(#{$i})
		+transform-origin(bottom center)
		+transform(rotate(#{$i*(360/$peg_count)}deg))
	
+keyframes(rainbow)
	0%
		background: #00f
	16%
		background: #f0f
	48%
		background: #f90
	64%
		background: #3c3
	80%
		background: #09c
	100%
		background: #00f
	
+keyframes(spin)
	0%
		+transform(rotate(0deg))
	100%
		+transform(rotate(360deg))

+keyframes(spin_back)
	0%
		+transform(rotate(0deg))
	100%
		+transform(rotate(-360deg))