Google do a barrel roll 效果揭秘

今天大家都见识到了Google的"do a barrel roll"效果（当然IE用户被赤裸裸无视了），因为这一段效果是通过CSS3实现的，在Chrome, Safari, Firefox和Opera浏览器上是可以非常完美的展现的。

使用到的CSS如下：

.barrel_roll {
-webkit-transition: -webkit-transform 4s ease;
-webkit-transform: rotate(360deg);
-moz-transition: -moz-transform 4s ease;
-moz-transform: rotate(360deg);
-o-transition: -o-transform 4s ease;
-o-transform: rotate(360deg);
transition: transform 4s ease;
transform: rotate(360deg);
}

当然这段代码需要一个触发:

jQuery('#search_text').bind('change keyup',function(){
var str = String( jQuery(this).val().toLowerCase() );
if(str.indexOf('"do a barrel') == 0) {
jQuery('body').addClass('barrel_roll');
setTimeout(function(){
jQuery('body').removeClass('barrel_roll');
},4000);
jQuery(this).unbind('change keyup');
}
});

看到jQuery就应该明白，这个东西并不是俺写的，俺是jQuery黑。上边这段代码引用自： http://au81.com/x0EOaZ。