CSS Windmill

CSS Windmill

I always wanted to make a pen with pure css and I always wanted to make a pen about windmills. So, I've created the CSS windmill.

Animation parts

I'll just show HAML code used to crate the animation:

?

1 2 3 4 5 6 7 8 9

#windmill  .post  .engine  .flaps   .flap   .flap   .flap  .head  .bulb

Flaps

Flaps is a big div containing the flaps. It moves around with this simple animation (I just love css animations):

?

1 2 3 4 5 6 7 8

@keyframes "rotatemill" {  0% {     transform:rotate(0deg);  }  100% {     transform:rotate(-360deg);  } }

Rounding flap tops

This is so much easier with the css (just one line of code and so much magic):

?

1	border-top-left-radius: 5px 20px;

Light

The light on top is an ordinary circle. To keep it simple, I've put it in the back so that it looks like a half circle :) and all the magic is contained in this animation:

?

1 2 3 4 5 6 7 8 9 10

@keyframes "lightbulblight" {  0% {     background: $bulbcolor;     box-shadow: 0 0 0 $bulbcolor;  }  50% {     background: lighten($bulbcolor, 60%);     box-shadow: 0 0 $bulbLight lighten($bulbcolor, 60%);  } }

And here's my example on:
Codepen