css - attribute - title html
¿Cómo hace google el barril? (8)
Si Google, ''haz un tonel'', 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?
Agrega un enlace con algo como eso:
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);}());
Como se dijo anteriormente, con animaciones y transformaciones CSS3.
Wesbo mostró una forma de aplicar el efecto en cualquier sitio. Puede ver una demostración e 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;
}
Es una Transición de CSS: https://developer.mozilla.org/en/CSS/CSS_transitions
-moz-transform: rotate(360deg);
-moz-transition-property: all;
-moz-transition-duration: 5s;
Ejemplo para Mozilla arriba, use -o y -webkit para apuntar a otros navegadores.
Este chico hará 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;
}
Recuerda que esto es para Firefox.
Si miras el código css:
body {
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-moz-animation-name: roll;
}
Utiliza animaciones CSS personalizadas. Vea las reglas de CSS aplicadas al <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;
}
si quieres infinito
@-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;}
suena como una transformation rotación css3 aplicada a las etiquetas body o html