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:

 #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):

 @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):

 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:

 @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