类似百度音乐唱片播放时CD图片不停旋转的实现

类似百度音乐唱片播放时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 }

 

我的空间