¿Cómo hace google el barril?

Si Google, 'hacer un barril de rodillos', toda la página hace una rotación de 360 grados. ¿Alguien tiene alguna idea de cómo Google está haciendo esto? Inhabilité javascript, y todavía ocurrió, ¿entonces tal vez una rotación css?¿Cómo hace google el barril?

Fuente

2011-11-03 wave

Es muy probable que la rotación de CSS. –

Si nos fijamos en el código CSS:

body { 
    -moz-animation-duration: 4s; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-name: roll; 
}

Fuente

2011-11-03 18:43:05 Nicolas

donde roll es algo así como @ -webkit-keyframes roll { \t desde {-webkit-transform: rotate (0); } \t a {-webkit-transform: rotate (360deg); } } – wave

¡Las animaciones de JavaScript molestas están muertas! Todos saludan odiosas animaciones CSS! –

Es una transición CSS: https://developer.mozilla.org/en/CSS/CSS_transitions

-moz-transform: rotate(360deg); 
-moz-transition-property: all; 
-moz-transition-duration: 5s;

Ejemplo para Mozilla anterior, utilice -o y -webkit a dirigirse a otros navegadores.

Fuente

2011-11-03 18:42:23 doctorless

suena como una rotación CSS3 transformation aplicado a las etiquetas ya sea del cuerpo o html

Fuente

2011-11-03 18:43:42

Se utiliza animaciones CSS personalizados. Ver las reglas CSS aplicados a la <body> aquí:

body { 
    -moz-animation-name: roll; 
    -moz-animation-duration: 4s; 
    -moz-animation-iteration-count: 1; 
    -o-animation-name: roll; 
    -o-animation-duration: 4s; 
    -o-animation-iteration-count: 1; 
    -webkit-animation-name: roll; 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: 1; 
}

Fuente

2011-11-03 18:44:02 BenM

Como se ha dicho anteriormente, con animaciones CSS3 y transformar.

Wesbo mostró una forma de aplicar el efecto en cualquier sitio. Puede ver una demostración y las instrucciones here.

@-webkit-keyframes roll { 
from { -webkit-transform: rotate(0deg) } 
to { -webkit-transform: rotate(360deg) } 
} 

@-moz-keyframes roll { 
from { -moz-transform: rotate(0deg) } 
to { -moz-transform: rotate(360deg) } 
} 

@keyframes roll { 
from { transform: rotate(0deg) } 
to { transform: rotate(360deg) } 
} 

body { 
-moz-animation-name: roll; 
-moz-animation-duration: 4s; 
-moz-animation-iteration-count: 1; 
-webkit-animation-name: roll; 
-webkit-animation-duration: 4s; 
-webkit-animation-iteration-count: 1; 
}

Fuente

2011-11-03 21:23:20 Leo

css prefijos fueron una idea tan tonta. –

Añadir un vínculo con algo así:

javascript:(function(){var s=document.createElement('style');s.innerHTML='%40-moz-keyframes roll { 100%25 { -moz-transform: rotate(360deg); } } %40-o-keyframes roll { 100%25 { -o-transform: rotate(360deg); } } %40-webkit-keyframes roll { 100%25 { -webkit-transform: rotate(360deg); } } body{ -moz-animation-name: roll; -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -o-animation-name: roll; -o-animation-duration: 4s; -o-animation-iteration-count: 1; -webkit-animation-name: roll; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 1; }';document.getElementsByTagName('head')[0].appendChild(s);}());

Fuente

2011-11-17 23:27:02 vectorash

Este chico va a hacer el truco en cualquier página web:

@-moz-keyframes roll { 
    from { -moz-transform: rotate(0deg) } 
    to { -moz-transform: rotate(360deg) } 
} 
body { 
    -moz-animation-name: roll; 
    -moz-animation-duration: 4s; 
    -moz-animation-iteration-count: 1; 
    }

recordar que esto es para Firefox.

Fuente

2011-12-09 17:54:25 defau1t

si quieres infinita

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 
body{-webkit-animation: spin 9.9s infinite linear;}

Fuente

2014-12-29 07:52:36

Respuesta

Cuestiones relacionadas