类似百度音乐唱片播放时CD图片不停旋转的实现
效果图
1 html代码
2 <imgsrc="img/logo.png"class="img-responsive"style="float: left;"/>
3 css3代码
4 # img{
5 -webkit-transition:-webkit-transform 5s;
6 -webkit-transform: rotate(0deg);
7 -moz-transform: rotate(0deg);
8 -webkit-transform-origin: center;
9 -moz-transform-origin: bottom center;
10 -webkit-animation: css_a 5s;
11 animation: css_a 5s;
12 -moz-animation: css_a 5s;
13 -webkit-animation-duration:10s;
14 -webkit-animation-timing-function: linear;
15 /*
16 * 不停的动
17 */
18 -webkit-animation-iteration-count: infinite;
19 /* Safari and Chrome */
20 -moz-animation-timing-function: linear;
21 /*
22 * 不停的动
23 */
24 -moz-animation-iteration-count: infinite;
25 }
26 @-webkit-keyframes css_a {from { /*chrome */
27
28 -webkit-transform: rotate(0deg);
29 -ms-transform: rotate(0deg);
30 /* IE 9 */
31 -moz-transform: rotate(0deg);
32 /* Firefox */
33 }
34
35 to {
36
37 -webkit-transform: rotate(360deg);
38 -ms-transform: rotate(360deg);
39 /* IE 9 */
40 -moz-transform: rotate(360deg);
41 /* Firefox */
42 }
43
44 }
45 @-moz-keyframes css_a {from { /*火狐 */
46 -webkit-transform: rotate(0deg);
47 -ms-transform: rotate(0deg);
48 /* IE 9 */
49 -moz-transform: rotate(0deg);
50 /* Firefox */
51 }
52
53 to {
54 -webkit-transform: rotate(360deg);
55 -ms-transform: rotate(360deg);
56 /* IE 9 */
57 -moz-transform: rotate(360deg);
58 /* Firefox */
59 }
60 }