Спиннинг в JPG в HTML 5 холст или CSS3 - PullRequest
Новая
       38

Спиннинг в JPG в HTML 5 холст или CSS3

0 голосов
/ 20 марта 2012

Я довольно новичок, когда дело доходит до анимации в сети, и мне было интересно, знает ли кто-нибудь, как я могу использовать jpg для потоковой передачи mp3 и постоянного вращения при нажатии.Я полагаю, это можно сделать с помощью html5 canvas или css3 переходов?но я понятия не имею, как выполнить это, особенно потому, что я хотел бы, чтобы оно постоянно вращалось медленно, любая помощь очень ценится!

1 Ответ

0 голосов
/ 26 августа 2012

Вы можете использовать функцию анимации css3: 

.spinning {
  animation-name: rotate;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

и просто добавить класс spinning к каждому объекту, который нужно повернуть.Просто измените свойства animation-duration , чтобы анимация была медленнее или быстрее.Обратите внимание, что вам нужно будет добавить префикс вендора '-moz', '-o', '-webkit' к каждому свойству CSS3.Например, для FF вам понадобится 

.spinning {
  -moz-animation-name: rotate;
  -moz-animation-duration: 5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
}
@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

.

...