Molino animado

Molino animado

by Emmanuel Garcia

HTML

<div class="windmill">
  <div class="tower">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 width="432px" viewBox="0 0 108 73" enable-background="new 0 0 108 73" xml:space="preserve">
<ellipse opacity="0.05" cx="54" cy="68.333" rx="53.666" ry="4.5"/>
<rect x="47.603" y="33.157" fill="#F2444D" width="17.62" height="26.43"/>
<polygon fill="#DDDAD0" points="56.412,0.914 68.844,15.786 81.274,30.659 56.412,30.659 31.551,30.659 43.981,15.786 "/>
<polygon fill="#F2444D" points="76.587,59.587 65.135,59.587 65.135,33.157 76.587,37.563 "/>
<polygon fill="#F2444D" points="36.238,59.587 47.691,59.587 47.691,33.157 36.238,37.563 "/>
<polygon opacity="0.6" fill="#BEC4B4" points="76.676,59.587 65.223,59.587 65.223,33.157 76.676,37.563 "/>
<polygon opacity="0.6" fill="#BEC4B4" points="36.15,59.587 47.603,59.587 47.603,33.157 36.15,37.563 "/>
<polygon fill="#F2444D" points="81.961,37.532 67.521,37.532 67.521,24.202 81.961,29.756 "/>
<rect x="45.304" y="24.202" fill="#F2444D" width="22.217" height="13.33"/>
<path fill="#F2444D" d="M28.221,70.158l2.343-9.6c0.105-1.019,0.975-1.853,1.932-1.853h47.833c0.956,0,1.826,0.834,1.932,1.853
	l2.343,9.6H28.221z"/>
<polygon fill="#F2444D" points="30.864,37.532 45.304,37.532 45.304,24.202 30.864,29.756 "/>
<polygon opacity="0.6" fill="#BEC4B4" points="81.961,37.18 67.521,37.18 67.521,23.849 81.961,29.404 "/>
<polygon opacity="0.6" fill="#BEC4B4" points="30.864,37.18 45.304,37.18 45.304,23.849 30.864,29.404 "/>
<path opacity="0.6" fill="#BEC4B4" d="M81.961,37.122c0,0.729-11.439,0.44-25.549,0.44s-25.548,0.289-25.548-0.44
	S42.303,35.8,56.412,35.8S81.961,36.393,81.961,37.122z"/>
<path opacity="0.8" fill="#191717" d="M53.28,70.012v-6.561c0-1.729,1.38-3.131,3.083-3.131l0,0c1.703,0,3.084,1.402,3.084,3.131
	v6.561H53.28z"/>
<circle fill="#FFFFFF" cx="55.923" cy="30.691" r="2.643"/>
</svg>
  </div>
  <div class="blades">
    <svg version="1.1"  xmlns="http://www.w3.org/2000/svg"...

CSS

html {
  height: 100%;
  width: 100%;
  background: #c0e4eb;
  background: -moz-radial-gradient(50% 50%, ellipse cover, #c0e4eb, #a3d7e0 100%);
  background: -webkit-radial-gradient(50% 50%, ellipse cover, #c0e4eb, #a3d7e0 100%);
  background: -o-radial-gradient(50% 50%, ellipse cover, #c0e4eb, #a3d7e0 100%);
  background: -ms-radial-gradient(50% 50%, ellipse cover, #c0e4eb, #a3d7e0 100%);
  background: radial-gradient(50% 50%, ellipse cover, #c0e4eb, #a3d7e0 100%);
  text-align: center;
}
.windmill {
  text-align: center;
  position: relative;
}
.tower {
  display: inline-block;
  margin-top: 25px;
}
.blades {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -139px;
  animation: spin-clockwise 9.25s linear infinite;
}
@keyframes spin-clockwise {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}