Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje01-12-2011, 19:54 (UTC)    
Título del mensaje: Efecto do a barrel roll

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; 
}


En el caso de usar Ice Blue o algun otro diseño que no sea css design deberan pegar este codigo en Texto por encima de la Pagina:
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


Ultima edición por design-pwg el Mie Dic 05, 2012 9:10 pm; editado 3 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group