ANIMACIÓN CSS3

Aprovechando las propiedades de border radius y los keyframe de css3 me puse en la tarea de hacer algo divertido ademas de añadir la propiedad transform para hacer algunos ajustes aqui el codigo.

CÓDIGO HTML

Hayder Espinoza



Análisis

















Diseño

















Programación

















Resultado

CÓDIGO CSS3

*{
 padding:0;
 margin:0;
 font-family:'Comic Sans MS' ;
}
#contenedor{
 width:400px;
 height: 400px;
 background-color:#ccc;
 position:relative;
 margin:auto;
 margin-top:40px;
}
#nombre{
  width:180px;
  height: 20px;
  padding:0.3em;
  font-weight: bold;
  font-size:140%;
  color:#c9c9c9;
  text-shadow: 1px 1px #fff, -1px -1px #333;
  position:absolute;
  top:10px;
  left:60px;
}
.tornillo{
 width:100px;
 height:100px;
 background-color:#333;
 -webkit-border-radius:50%;
 position:absolute;
}
.tema{
 font-size:110%;
 color:#fff;
 width:75px;
 height: 20px;
 padding:0 10px;
 text-align:center;
 position:absolute;
 left:0px;
 top:36px;
 font-weight:bold;
}
.salientes{
 width:13px;
 height: 26px;
 background-color:#333;
 position:absolute;
}

.salientes:after{
 content:"";
 border-top:13px solid transparent;
 border-right:3px solid #333;
 border-bottom:13px solid #333;
 border-left:3px solid transparent;
 position:absolute;
 left:-6px; 
}
.salientes:before{
 content:"";
 border-top:13px solid transparent;
 border-right:3px solid transparent;
 border-bottom:13px solid #333;
 border-left:3px solid #333;
 position:absolute;
 right:-6px;

}
.uno{
 -webkit-transform:rotate(-30deg);
 top:-12px;
 left:15px;
}
.dos{
 -webkit-transform:rotate(30deg);
 top:-12px;
 right:15px;
}
.tres{
 -webkit-transform:rotate(-90deg);
 top:35px;
 left:-13px;
}
.cuatro{
 -webkit-transform:rotate(90deg);
 top:35px;
 right:-13px; 

}
.cinco{
 -webkit-transform:rotate(-150deg);
 bottom:-12px;
 left:15px; 
}
.seis{
 -webkit-transform:rotate(150deg);
 bottom:-12px;
 right:15px; 
}
.caja{
 width:100px;
 height: 100px;
 position:absolute;
}
.caja-analisis{
 right:35px;
 top:35px;
}
.caja-disenio{
 right:138px;
 top:55px;
 -webkit-transform:scale(0.7, 0.7);
}
.caja-programacion{
 top:125px;
 left:104px;
 -webkit-transform:scale(0.8, 0.8);
}
.caja-resultado{
 right:113px;
 bottom:82px;
 -webkit-transform:scale(1.2, 1.2);
}
.analisis, .programacion{
 -webkit-animation:10s rotar-izquierda infinite ease-in-out;
}
.disenio, .resultado {
 -webkit-animation:10s rotar-derecha infinite ease-in-out;
}
@-webkit-keyframes rotar-derecha{
 from{
  -webkit-transform:rotate(0deg);
 }
 to{
  -webkit-transform:rotate(360deg);
 }
}
@-webkit-keyframes rotar-izquierda{
 from{
  -webkit-transform:rotate(0deg);
 }
 to{
  -webkit-transform:rotate(-360deg);
 }
}