Jak Google robi beczkę?

Jeśli używasz Google, "wykonaj beczkę", cała strona ma rotację 360. Czy ktoś ma jakieś domysły na temat tego, w jaki sposób Google to robi? Wyłączyłem javascript, a on wciąż się pojawił, więc może obrót css?Jak Google robi beczkę?

Źródło

2011-11-03 wave

To najprawdopodobniej obrót CSS. –

Jeśli spojrzeć na kod css:

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

Źródło

2011-11-03 18:43:05 Nicolas

gdzie roll to coś w rodzaju @ -webkit-klatki kluczowe roll { \t z {-webkit-transform: rotate (0); } \t to {-webkit-transform: rotate (360deg); } } – wave

Obrzydliwe animacje JavaScript nie działają! Wszystkie niepokojące animacje CSS grad! –

To przejście CSS: https://developer.mozilla.org/en/CSS/CSS_transitions

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

Przykład Mozilla powyżej, należy -o i -webkit kierować innych przeglądarek.

Źródło

2011-11-03 18:42:23 doctorless

brzmi jak obracanie CSS3 transformation stosowane zarówno ciała lub HTML tagów

Źródło

2011-11-03 18:43:42

Wykorzystuje niestandardowe animacje CSS. Zobacz CSS zastosowane do <body> tutaj:

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

Źródło

2011-11-03 18:44:02 BenM

Jak wspomniano powyżej, z animacji CSS3 i przekształcać.

Wesbo pokazało sposób zastosowania efektu na dowolnej stronie. Możesz zobaczyć wersję demo i instrukcję 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; 
}

Źródło

2011-11-03 21:23:20 Leo

Prefiksy css były takim głupim pomysłem. –

dodaj link z czymś takim:

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

Źródło

2011-11-17 23:27:02 vectorash

Ten facet zrobi trick na dowolnej stronie internetowej:

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

Pamiętaj, że to jest dla Firefoksa.

Źródło

2011-12-09 17:54:25 defau1t

jeśli chcesz nieskończoną

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

Źródło

2014-12-29 07:52:36

Odpowiedz

Powiązane problemy