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