01 | <style> |
02 |
03 | .info_album { |
04 | float: left; |
05 | width: 300px; |
06 | margin-left: 20px; |
07 | } |
08 |
09 | .info_album .avatar_album { |
10 | width: 300px; |
11 | height: 150px; |
12 | position: relative; |
13 | } |
14 |
15 | .avatar_album .rotate_album { |
16 | width: 140px; |
17 | height: 140px; |
18 | position: absolute; |
19 | z-index: 17; |
20 | left: 67px; |
21 | top: 7px; |
22 | } |
23 |
24 | .avatar_album .box_font_album { |
25 | width: 140px; |
26 | position: absolute; |
27 | z-index: 20; |
28 | background: url(http://2.bp.blogspot.com/-aSxbS11pnvM/U8jyvqMceAI/AAAAAAAAAHQ/KobtqLrncH8/s1600/icon.png) -241px 0px no-repeat; |
29 | height: 140px; |
30 | } |
31 |
32 | .avatar_album .box_bg_album { |
33 | width: 230px; |
34 | position: absolute; |
35 | z-index: 19; |
36 | background: url(http://2.bp.blogspot.com/-aSxbS11pnvM/U8jyvqMceAI/AAAAAAAAAHQ/KobtqLrncH8/s1600/icon.png) left 0px no-repeat; |
37 | height: 150px; |
38 | overflow: hidden; |
39 | } |
40 |
41 | .rotate{ |
42 | -webkit-border-radius:70px;-moz-border-radius:70px;border-radius:70px; |
43 | animation:mymove 10s linear 0s infinite ; /* IE 10+ */ |
44 | -webkit-animation:mymove 10s linear 0s infinite ; /* Safari 4+ */ |
45 | -moz-animation: mymove 10s linear 0s infinite ; /* Fx 5+ */ |
46 | -o-animation: mymove 10s linear 0s infinite ; /* Opera 12+ */ |
47 | -webkit-transition-duration: 0.8s; |
48 | -moz-transition-duration: 0.8s; |
49 | -o-transition-duration: 0.8s; |
50 | transition-duration: 0.8s; |
51 | -webkit-transition-property: -webkit-transform; |
52 | -moz-transition-property: -moz-transform; |
53 | -o-transition-property: -o-transform; |
54 | transition-property: transform; |
55 | overflow:hidden; |
56 | } |
57 |
58 | @-webkit-keyframes mymove /* Safari and Chrome */ |
59 | { |
60 | from{ |
61 | -webkit-transform:rotate(-360deg); |
62 | -moz-transform:rotate(-360deg); |
63 | -o-transform:rotate(-360deg);} |
64 | to{ |
65 | -webkit-transform:rotate(0deg); |
66 | -moz-transform:rotate(0deg); |
67 | -o-transform:rotate(0deg); |
68 | } |
69 | } |
70 | </style> |
71 |
72 | <div class="info_album"> |
73 | <div class="avatar_album"> |
74 | <div class="rotate_album"> |
75 | <img class="rotate"src="http://p.img.nct.nixcdn.com/playlist/2013/12/04/a/c/b/4/1386153460167.jpg"height="126" width="126" /></div> |
76 | <div class="box_font_album"> |
77 | </div> |
78 | <div class="box_bg_album"> |
79 | <a class="img_avatar" href="javascript:;"><img class="img_album"src="http://p.img.nct.nixcdn.com/playlist/2013/12/04/a/c/b/4/1386153460167.jpg"height="140" itemprop="image" width="140" /></a> |
80 | <a class="img_avatar" href="javascript:;"></a> |
81 | </div> |
82 | </div> |
83 | </div> |
84 |
85 | <div> |
86 | </div> |
