谷歌如何做滚桶？

如果你是谷歌，'做桶滚动'，整个页面360度旋转。有没有人有任何猜测Google如何做到这一点？我禁用JavaScript，它仍然发生，所以也许一个CSS轮换？谷歌如何做滚桶？

2011-11-03 wave

这是最有可能的CSS旋转。 –

如果你看一下CSS代码：

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

来源

2011-11-03 18:43:05 Nicolas

其中roll是类似于 @ -webkit-keyframes roll { \t from {-webkit-transform：rotate（0）; } \t to {-webkit-transform：rotate（360deg）; } } – wave

令人讨厌的JavaScript动画已经死了！所有的雹子都令人讨厌的CSS动画！ –

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

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

实施例的Mozilla以上，使用-o和-webkit靶向其他浏览器。

来源

2011-11-03 18:42:23 doctorless

听起来像适用于任何身体或html标签

来源

2011-11-03 18:43:42

它使用自定义的CSS动画一个CSS3旋转transformation。查看应用到这里<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; 
}

来源

2011-11-03 18:44:02 BenM

正如上面所说，用CSS3动画和变换。

Wesbo展示了一种在任何网站上应用该效果的方法。您可以查看演示和指令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; 
}

来源

2011-11-03 21:23:20 Leo

css前缀是这样一个愚蠢的想法。 –

添加一个链接有类似的东西：

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

来源

2011-11-17 23:27:02 vectorash

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

@-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浏览器。

来源

2011-12-09 17:54:25 defau1t

如果你想无限

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

来源

2014-12-29 07:52:36

谷歌如何做滚桶？

回答

相关问题