2012-03-20 140 views
-2

当我在网上看到动画时,我很新手,我想知道如果有人知道我怎样才能使用jpg来流式播放mp3,并且在点击时不断旋转。我认为它可以用html5 canvas或css3转换完成?但我不知道如何执行此特别是因为我希望它不断旋转,任何帮助非常感谢!在HTML 5 canvas或css3中旋转jpg

+0

你将需要CSS3动画,而不是过渡。 – BigBalli 2012-04-17 17:36:16

回答

0

你可以使用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属性以使动画变得更慢或更快。请注意,您必须为每个CSS3属性添加供应商前缀'-moz','-o','-webkit'。例如,对于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); 
    } 
}