Bueno bienvenidos nuevamente a mis aportes. Luego de tanto tiempo me pareció bueno aportar un código que para mi es bueno y bastante sensillo.
Este efecto se llama
Do a barrel roll se puede ver en google poniendo en el buscador do a barrel roll y darle enter.
Alguna vista previa:
Bueno este codigo como sabran es CSS, por lo cual si usas Css Design deberas pegar el codigo en Css code sin style tags, el codigo seria este:
Código: @-moz-keyframes roll {
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes roll {
100% {
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes roll {
100% {
-webkit-transform: rotate(360deg);
}
}
body {
-moz-animation-duration: 4s;
-moz-animation-name: roll;
-moz-animation-iteration-count: 1;
-webkit-animation-duration: 4s;
-webkit-animation-name: roll;
-webkit-animation-iteration-count: 1;
-o-animation-duration: 4s;
-o-animation-name: roll;
-o-animation-iteration-count: 1;
}
Código: <style>@-moz-keyframes roll {
100% {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes roll {
100% {
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes roll {
100% {
-webkit-transform: rotate(360deg);
}
}
body {
-moz-animation-duration: 4s;
-moz-animation-name: roll;
-moz-animation-iteration-count: 1;
-webkit-animation-duration: 4s;
-webkit-animation-name: roll;
-webkit-animation-iteration-count: 1;
-o-animation-duration: 4s;
-o-animation-name: roll;
-o-animation-iteration-count: 1;
}</style>
En caso de querer agregar el efecto en alguna pagina, deveran utilizar el codigo tal cual esta arriba con las etiquetas <style></style>
Fuente | http://jaswin.net/code/do-a-barrel-roll-css-animation/
Saludos!
Design-PWG.
------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui______________
10 años ayudando a PWG.
Soporte PWG:
ayuda@paginawebgratis.es
Reportes:
support-es@webme.com