谷歌是如何进行桶滚的？

Question

如果你用谷歌搜索“做桶滚”，整个页面就会 360 度旋转。有人猜测谷歌是如何做到这一点的吗？我禁用了 javascript，但它仍然发生，所以也许是 css 轮换？

Answer 1

如果你看一下 CSS 代码：

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

Answer 2

如上所述，用CSS3动画和变换。

Wesbo 展示了一种在任何网站上应用该效果的方法。您可以在此处查看演示和说明。

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

Answer 3

这是一个 CSS 过渡：https://developer.mozilla.org/en/CSS/CSS_transitions

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

以上面的 Mozilla 为例，使用 -o 和 -webkit 来定位其他浏览器。

Answer 4

它使用自定义 CSS 动画。请参阅此处应用于 的 CSS 规则：

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

Answer 5

听起来像是应用于 body 或 html 标签的 css3 旋转 transformation

Answer 6

添加一个类似这样的链接：

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

Answer 7

这个家伙会在任何网页上做这个伎俩：

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

记住，这是针对 Firefox 的。

Answer 8

如果你想要无限

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