CSS3 Hiệu ứng album đĩa nhạc xoay tròn như trên nhaccuatui.com

CSS3 ngày nay được sử dụng rộng rãi kết hợp với HTML5 làm cho website của bạn trở lên sinh động hơn mà trước đây chúng ta phải dùng nhiều đến javascript hoặc flash, khi đó website load rất chậm vì phải xử lý nhiều. Nhưng khi HTML5 ra đời sẽ giúp chúng ta giải quyết tốt bài toán đó, tuy nhiên CSS3 này cũng chỉ chạy từ IE9 trở lên

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>

vanitapadfieldNo Deposit Casino | 100% Free to Play on Any MobileOnline 벳 3 Casino No Deposit Bonus Codes 오락실 슬롯 머신 게임 It is bet365 배당 best to try the free spins 배…

AnonymousAd cho mình hỏi: mình tải template blogspot cài vào blog của mình nhưng nó bị lỗi . ví dụ mình post 3 bài thì có một bài không hiển thị chữ mà toàn là…

Anonymoustest

Anonymoustest2

Anonymous :>)

vn Nhạc trẻ@-)@-)@-)@-)@-)

vn Nhạc trẻ:)):)):)):)):)):))

vn Nhạc trẻ:):):):):)

nấm bàngLà vô danh tiểu tốt thôi mà =))

nấm bàng:D:))

igooseo.org:P