Анимация бесконечного вращения с использованием CSS и Javascript [закрыто]
Я проходил через некоторые примеры веб-сайта на одной странице и нашел это:http://alwayscreative.net/. Я полностью поражен диском на заднем плане, который вращается бесконечно. я просмотрел несколько примеров, но ни один из них не работал таким образом. Может кто-нибудь сказать мне, как это было реализовано. Спасибо.
5 ответов
CSS3 код:
@keyframes rotate360 {
to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }
/* TODO: Add -vendor-prefixes for different browsers */
<img src="//placehold.it/200x200/cfc?text=Wooo!" />
этот пример делает бесконечное вращение очень хорошо:
div{
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 80px/80px;;
border:solid 21px #f00;
width:100px;
height:100px;
-webkit-animation: rotation 2s linear infinite;
-moz-animation: rotation 2s linear infinite;
-ms-animation: rotation 2s linear infinite;
}
@-webkit-keyframes rotation {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotation {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotation {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); }
}
вы можете проверить его здесь: http://jsfiddle.net/HS68a/2/
пожалуйста, проверьте эту строку. мы можем использовать css3 для поворота изображения. и я тестировал в Chrome работает нормально http://jsfiddle.net/sUHKh/
вот как это реализовано в вашем примере :
@-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-moz-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-o-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}
но я не вижу никакого интереса (я бы рискнул сказать, что это кажется немного странным...) при вводе браузера префикс преобразования в другом браузере конкретных ключевых кадров.
ему также не хватает общих ключевых кадров и поддержки IE10, поэтому я реализовал его так:
@-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation1{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation1{
from{-o-transform:rotate(0deg);}
to{-o-transform:rotate(360deg);}
}
@keyframes rotation1{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}
Я только что сделал "проверить элемент" в Chrome. Вот CSS.
.vector1 {
-moz-animation: rotation1 30s linear infinite;
-o-animation: rotation1 30s linear infinite;
-webkit-animation: rotation1 30s linear infinite;
animation: rotation1 30s linear infinite;
}