谷歌如何做滚桶？
如果你是谷歌，“做一个桶滚”，整个页面360度旋转。 有没有人有任何猜测，谷歌是如何做到这一点？ 我禁用JavaScript，它仍然发生，所以也许一个CSS旋转？
如果你看看的CSS代码：
body { -moz-animation-duration: 4s; -moz-animation-iteration-count: 1; -moz-animation-name: roll; } 如上所述，用CSS3animation和变换。
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; }
这是一个CSS过渡： https ： //developer.mozilla.org/en/CSS/CSS_transitions
-moz-transform: rotate(360deg); -moz-transition-property: all; -moz-transition-duration: 5s;
上面的Mozilla示例，使用-o和-webkit来定位其他浏览器。
它使用自定义的CSSanimation。 请参阅这里应用于<body>的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; }
听起来像是应用于body或html标签的css3旋转转换
添加一个类似这样的链接：
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);}());
这家伙会在任何网页上做的伎俩：
@-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。
如果你想要无限
@-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;}
