谷歌如何做滾桶？

如果你是谷歌，'做桶滾動'，整個頁面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

谷歌如何做滾桶？

回答

相關問題