web-dev-qa-db-fra.com

Comment google fait-il le tonneau?

Si vous Google, "faites un tonneau", la page entière effectue une rotation de 360. Quelqu'un at-il une idée de la façon dont Google procède? J'ai désactivé javascript, et c'est toujours arrivé, alors peut-être une rotation css?

cssgoogle-search
42
wave

Si vous regardez le code css:

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

Comme dit ci-dessus, avec des animations CSS3 et transformer.

Wesbo a montré un moyen d'appliquer l'effet sur n'importe quel site. Vous pouvez voir une démonstration et des instructions ici .

@-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;
}
14
Leo

C'est une transition CSS: https://developer.mozilla.org/en/CSS/CSS_transitions

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

Exemple pour Mozilla ci-dessus, utilisez -o et -webkit pour cibler d'autres navigateurs.

4
doctorless

Il utilise des animations CSS personnalisées. Voir les règles CSS appliquées au <body> ici:

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

Ajouter un lien avec quelque chose comme ça: 

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);}());
1
vectorash

sonne comme une rotation transformation / appliquée aux balises body ou html

1
Joseph Marikle

Ce mec fera l'affaire sur n'importe quelle page 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;
   }

Rappelez-vous que c'est pour firefox.

0
defau1t

si tu veux l'infini

 @-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;}
0
joshua pogi 28