Если вы Google, "сделайте рулон бочки", вся страница будет вращаться на 360 градусов. У кого-нибудь есть догадки относительно того, как Google это делает? Я отключил javascript, и все еще произошло, так что, возможно, css-ротация?
Как Google делает бросок ствола?
Ответ 1
Если вы посмотрите на код css:
body {
-moz-animation-duration: 4s;
-moz-animation-iteration-count: 1;
-moz-animation-name: roll;
}
Ответ 2
Как было сказано выше, с анимацией CSS3 и преобразованием.
Wesbo показал способ применения эффекта на любом сайте. Вы можете просмотреть демо и инструкцию здесь.
@-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;
}
Ответ 3
Это переход CSS: https://developer.mozilla.org/en/CSS/CSS_transitions
-moz-transform: rotate(360deg);
-moz-transition-property: all;
-moz-transition-duration: 5s;
Пример для Mozilla выше, используйте -o
и -webkit
для таргетинга на другие браузеры.
Ответ 4
Он использует пользовательские анимации CSS. См. Правила CSS, применяемые к <body>
здесь:
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;
}
Ответ 5
звучит как поворот css3 преобразование, применяемый к телу body или html
Ответ 6
Добавьте ссылку на что-то вроде этого:
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);}());
Ответ 7
Этот парень сделает трюк на любой веб-странице:
@-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.
Ответ 8
если вы хотите бесконечный
@-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;}