Google बैरल रोल कैसे करता है?

यदि आप Google, 'बैरल रोल करें', तो संपूर्ण पृष्ठ 360 रोटेशन करता है। क्या किसी के पास कोई अनुमान है कि Google यह कैसे कर रहा है? मैंने जावास्क्रिप्ट को अक्षम कर दिया, और यह अभी भी हुआ, तो शायद एक सीएसएस रोटेशन?Google बैरल रोल कैसे करता है?

स्रोत

2011-11-03 wave

यह सबसे अधिक संभावना सीएसएस रोटेशन है। –

आप सीएसएस कोड को देखें, तो:

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

स्रोत

2011-11-03 18:43:05 Nicolas

जहां रोल @ -webkit-keyframes रोल { \t {-webkit-transform: rotate (0) से कुछ है; } \t {-webkit-transform: rotate (360deg); } } – wave

अप्रिय जावास्क्रिप्ट एनिमेशन मर चुके हैं! सभी गलेदार अप्रिय सीएसएस एनिमेशन! –

यह एक सीएसएस संक्रमण है: मोज़िला के लिए https://developer.mozilla.org/en/CSS/CSS_transitions

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

उदाहरण से ऊपर, -o और -webkit का उपयोग अन्य ब्राउज़र को लक्ष्य करने के लिए।

स्रोत

2011-11-03 18:42:23 doctorless

एक css3 रोटेशन transformation या तो शरीर या html टैग

स्रोत

2011-11-03 18:43:42

यह कस्टम CSS एनिमेशन का उपयोग करता है करने के लिए लागू की तरह लगता है। CSS3 के एनिमेशन के साथ

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

जैसा कि ऊपर कहा, और परिणत: <body> यहाँ करने के लिए लागू सीएसएस नियम देखें।

वेस्बो ने किसी भी साइट पर प्रभाव लागू करने का एक तरीका दिखाया। आप डेमो और निर्देश 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

सीएसएस उपसर्ग इस तरह के बेवकूफ विचार थे। –

ऐसा ही कुछ के साथ एक लिंक जोड़ें:

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

याद रखें कि यह फ़ायरफ़ॉक्स के लिए है।

स्रोत

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

Google बैरल रोल कैसे करता है?

उत्तर

संबंधित मुद्दे