Question

当谈到网络动画时，我是一个新手，我想知道是否有人知道如何使用jpg来播放mp3并在点击时不断旋转。我认为它可以用html5 canvas或css3过渡完成？但我不知道如何执行此操作，尤其是因为我希望它能够不断缓慢旋转，非常感谢任何帮助！

Answer 1

您可以使用css3的animation功能：

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

然后将旋转类附加到需要旋转的每个对象上。只需更改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);
  }
}

在html 5 canvas或css3中旋转jpg

1 个答案: