 |
| Demo 1 |
Thủ thuật này được giới thiệu tại xenforo của JacquiiDesigns. Nếu muốn tìm hiểu thêm thì đến trang gốc nhưng báo trước là việc làm khá lằng nhăng. Còn nếu muốn ăn ngay thì làm theo hướng dẫn sau đây. Thủ thuật trên cũng đã được giới thiệu tại BTK nhưng ở bài viết này mình viết chi tiết hơn và khác hơn một chút.
Demo live
Tải các file sau up lên Google Code:
https://dl.dropbox.com/u/29848934/holiday_bells/holidays_bells.swf (up nên các hosting về flash)
https://dl.dropbox.com/u/29848934/holiday_bells/holiday_bells.js (nhớ mở holiday_bells.js thay link holidays_bells.swf trên vào trước khi up lên hosting riêng.)
https://dl.dropbox.com/u/29848934/holiday_bells/swfobject.min.js
Chú ý thay link các file của bạn vào code ở bước 1 nếu làm biếng bạn có thể dùng link trên luôn cũng được.
THỰC HIỆN
<script src="holiday_bells/js/swfobject.min.js"></script> <script src="holiday_bells/js/holiday_bells.js"></script>
Bước 2: Chèn đoạn code này ngay dưới thẻ <body>
<div class="b-page_newyear"> <div class="b-page_content"> <i class="b-head-decor"> <i class="b-head-decor_inner b-head-decor_inner_n1"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> </i> <i class="b-head-decor_inner b-head-decor_inner_n2"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> </i> <i class="b-head-decor_inner b-head-decor_inner_n3"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> </i> <i class="b-head-decor_inner b-head-decor_inner_n4"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> </i> <i class="b-head-decor_inner b-head-decor_inner_n5"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> </i> <i class="b-head-decor_inner b-head-decor_inner_n6"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball_right"></div><div class="b-ball_i"></div></div> <div class="b-ball
Bước 3: Chèn đoạn code này ngay dưới thẻ ]]></b:skin> và lưu lại là xong.
Chú ý ở code này nếu bạn thay thế các icon ảnh tại đây thì sẽ có mộ dàn chuông khác cũng khá đẹp mắt như ảnh bên dưới.
 |
| Demo 2 |
/* HOLIDAY BELLS */
.b-page__content { min-height:20px; }
.b-head-decor { display:none; }
.b-page_newyear .b-head-decor { position:absolute; top:0; left:0; display:block; height:115px; width:100%; overflow:hidden; background:url('https://lh4.googleusercontent.com/-Fw52YRWmOes/UMB0XOjXsnI/AAAAAAAAC1E/EENsIn76nXk/s373/b-head-decor_newyear.png') repeat-x 0 0; }
.b-page_newyear .b-head-decor__inner { position:absolute; top:0; left:0; height:115px; display:block; width:373px; }
.b-page_newyear .b-head-decor::before { content:''; display:block; position:absolute; top:-115px; left:0; z-index:3; height:115px; display:block; width:100%; }
.b-page_newyear .b-head-decor__inner_n2 { left:373px; }
.b-page_newyear .b-head-decor__inner_n3 { left:746px; }
.b-page_newyear .b-head-decor__inner_n4 { left:1119px; }
.b-page_newyear .b-head-decor__inner_n5 { left:1492px; }
.b-page_newyear .b-head-decor__inner_n6 { left:1865px; }
.b-page_newyear .b-head-decor__inner_n7 { left:2238px; }
.b-ball { position:absolute; }
.b-ball_n1 { top:0; left:3px; width:59px; height:83px; }
.b-ball_n2 { top:-19px; left:51px; width:55px; height:70px; }
.b-ball_n3 { top:9px; left:88px; width:49px; height:67px; }
.b-ball_n4 { top:0; left:133px; width:57px; height:102px; }
.b-ball_n5 { top:0; left:166px; width:49px; height:57px; }
.b-ball_n6 { top:6px; left:200px; width:54px; height:70px; }
.b-ball_n7 { top:0; left:240px; width:56px; height:67px; }
.b-ball_n8 { top:0; left:283px; width:54px; height:53px; }
.b-ball_n9 { top:10px; left:321px; width:49px; height:66px; }
.b-ball_n1 .b-ball__i { background:url('https://lh3.googleusercontent.com/-CBEwMmGrqZ8/UMB0VT8RJMI/AAAAAAAAC0U/VVuQKjz292Y/s83/b-ball_n1.png') no-repeat; }
.b-ball_n2 .b-ball__i { background:url('https://lh5.googleusercontent.com/-wOz2yKeFu7I/UMB0URa7HNI/AAAAAAAAC0I/XnAVs3w9_Vw/s70/b-ball_n2.png') no-repeat; }
.b-ball_n3 .b-ball__i { background:url('https://lh5.googleusercontent.com/-8A4ZJeTF4cg/UMB0UygpdrI/AAAAAAAAC0M/NfoWup7hI58/s67/b-ball_n3.png') no-repeat; }
.b-ball_n4 .b-ball__i { background:url('https://lh3.googleusercontent.com/-Nx7_Tm-nkAI/UMB0VkMAHpI/AAAAAAAAC0c/09GjFBtv1Sw/s102/b-ball_n4.png') no-repeat; }
.b-ball_n5 .b-ball__i { background:url('https://lh5.googleusercontent.com/-4P-GX2WVLXI/UMB0V6O1MrI/AAAAAAAAC0Y/nNZOwiGOmRc/s57/b-ball_n5.png') no-repeat; }
.b-ball_n6 .b-ball__i { background:url('https://lh4.googleusercontent.com/-Y8mmZd60f5k/UMB0WEfbWcI/AAAAAAAAC0k/xf-TW8EU0-w/s70/b-ball_n6.png') no-repeat; }
.b-ball_n7 .b-ball__i { background:url('https://lh3.googleusercontent.com/-BYfmH5Mpksw/UMB0WbPto9I/AAAAAAAAC00/jFbTK8qzXbs/s67/b-ball_n7.png') no-repeat; }
.b-ball_n8 .b-ball__i { background:url('https://lh5.googleusercontent.com/-AkG1qZqE2lA/UMB0WnEGXtI/AAAAAAAAC0s/VgQQkCeP7YQ/s54/b-ball_n8.png') no-repeat; }
.b-ball_n9 .b-ball__i { background:url('https://lh5.googleusercontent.com/-qyza4SONUdM/UMB0W64FoOI/AAAAAAAAC1A/uBhV0yD6sbk/s66/b-ball_n9.png') no-repeat; }
.b-ball_i1 .b-ball__i { background:url('https://lh6.googleusercontent.com/-QhhDd1SE_V0/UMB0PA61nFI/AAAAAAAACzg/CXvrLe3CRjI/s71/b-ball_i1.png') no-repeat; }
.b-ball_i2 .b-ball__i { background:url('https://lh4.googleusercontent.com/-9XMuFc_Yp5c/UMB0QBkDNuI/AAAAAAAACzk/bKiU8K3vgXU/s61/b-ball_i2.png') no-repeat; }
.b-ball_i3 .b-ball__i { background:url('https://lh3.googleusercontent.com/-j6E5yxK2u-Y/UMB0PGXq-2I/AAAAAAAACzc/j1vsaU11xvc/s31/b-ball_i3.png') no-repeat; }
.b-ball_i4 .b-ball__i { background:url('https://lh6.googleusercontent.com/-o2OZuJyWj4s/UMB0QoPX2KI/AAAAAAAACz4/JQIHqmVrhS8/s51/b-ball_i4.png') no-repeat; }
.b-ball_i5 .b-ball__i { background:url('https://lh5.googleusercontent.com/-kG7U9F_tEx4/UMB0QYsHNLI/AAAAAAAACzw/3QInJrJIIfA/s78/b-ball_i5.png') no-repeat; }
.b-ball_i6 .b-ball__i { background:url('https://lh4.googleusercontent.com/-TWr-kxeQTSc/UMB0UdruXgI/AAAAAAAAC0E/CS9sAXVQ_9E/s69/b-ball_i6.png') no-repeat; }
.b-ball_i1{top:0; left:0; width:25px; height:71px; }
.b-ball_i2{top:0; left:25px; width:61px; height:27px; }
.b-ball_i3{top:0; left:176px; width:29px; height:31px; }
.b-ball_i4{top:0; left:205px; width:50px; height:51px; }
.b-ball_i5{top:0; left:289px; width:78px; height:28px; }
.b-ball_i6{top:0; left:367px; width:6px; height:69px; }
.b-ball__i { position:absolute; width:100%; height:100%; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; -o-transform-origin:50% 0; transform-origin:50% 0; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; pointer-events:none; }
.b-ball_bounce .b-ball__right{position:absolute; top:0; right:0; left:50%; bottom:0; z-index:9; }
.b-ball_bounce:hover .b-ball__right{ display:none; }
.b-ball_bounce .b-ball__right:hover{ left:0; display:block!important; }
.b-ball_bounce.bounce>.b-ball__i{ -webkit-transform:rotate(-9deg); -moz-transform:rotate(-9deg); -o-transform:rotate(-9deg); transform:rotate(-9deg); }
.b-ball_bounce .b-ball__right.bounce+.b-ball__i { -webkit-transform:rotate(9deg); -moz-transform:rotate(9deg); -o-transform:rotate(9deg); transform:rotate(9deg); }
.b-ball_bounce.bounce1>.b-ball__i {-webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); transform:rotate(6deg); }
.b-ball_bounce .b-ball__right.bounce1+.b-ball__i {-webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); transform:rotate(-6deg); }
.b-ball_bounce.bounce2>.b-ball__i{ -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }
.b-ball_bounce .b-ball__right.bounce2+.b-ball__i{ -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
.b-ball_bounce.bounce3>.b-ball__i {-webkit-transform:rotate(1.5deg); -moz-transform:rotate(1.5deg); -o-transform:rotate(1.5deg); transform:rotate(1.5deg); }
.b-ball_bounce .b-ball__right.bounce3+.b-ball__i { -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); transform:rotate(-1.5deg); }
Chúc bạn thành công!
Dropbox, dịch vụ lưu trữ đám mây, chia sẻ và đồng bộ dữ liệu giữa điện thoại di động, tablet, laptop và desktop. Tài khoản miễn phí 2.25GB! Bạn có thể kiếm thêm tối đa đến 18GB khi giới thiệu thêm người đăng ký Dropbox (mỗi người mà bạn giới thiệu đăng ký và cài đặt thành công Dropbox, bạn được 500MB!)
0 nhận xét: