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:



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

 @keyframes "rotatemill" {
  0% {
  100% {

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;


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:

1 comment:

Pete Main said...

It is an informative post.