it-swarm.com.de

Wie rollt Google das Fass?

Wenn Sie bei Google "Fass rollen", wird die gesamte Seite um 360 Grad gedreht. Hat jemand irgendwelche Vermutungen, wie Google dies tut? Ich habe Javascript deaktiviert und es ist immer noch vorgekommen, also vielleicht eine CSS-Rotation?

42
wave

Wenn Sie sich den CSS-Code ansehen:

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

Wie schon gesagt, mit CSS3-Animationen und Transformationen.

Wesbo zeigte eine Möglichkeit, den Effekt auf jede Site anzuwenden. Sie können eine Demo und Anleitung hier ansehen.

@-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

Es ist eine CSS-Transition: https://developer.mozilla.org/de/CSS/CSS_transitions

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

Beispiel für Mozilla oben verwenden Sie -o und -webkit, um andere Browser anzusprechen.

4
doctorless

Es verwendet benutzerdefinierte CSS-Animationen. Die CSS-Regeln für <body> finden Sie hier:

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

Fügen Sie einen Link mit so etwas hinzu: 

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

klingt wie eine css3-Rotation transformation , die entweder auf die body- oder html-Tags angewendet wird

1
Joseph Marikle

Dieser Typ macht den Trick auf jeder Webseite:

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

Denken Sie daran, dass dies für Firefox ist.

0
defau1t

wenn du unendlich willst

 @-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