[Đóng góp] Phúc lộc thọ đẹp để trang trí tết cho 4rum

  Bài viết hay nhất1
demo: http://www.vngame.pro/h43-page

Sắp tết rồi nên mình share cho anh em trang trí 4rum đón tết. Chỉ sử dụng css và ảnh định dạng .png nên load nhanh nhẹ

Bạn thêm đoạn code bên dưới vào nơi cần hiện rồi chỉnh lại style cho hợp với 4rum nhé nếu bạn nào không biết chỉnh thì liên hệ yahoo mình giúp: hotro.4rlythuongkiet

Code:
<style>

.centerdiv {
margin: 0 auto;
height:300px;
width: 960px;
text-align: left;
position: relative;
}
.anim_loc, .anim_phuc, .anim_tho {
   width: 200px;
   height: 230px;
   -webkit-animation: anim_play 1s steps(32) infinite;
   -moz-animation: anim_play 1s steps(32) infinite;
   -o-animation: anim_play 1s steps(32) infinite;
   -ms-animation: anim_play 1s steps(32) infinite;
   animation: anim_play 1s steps(32) infinite;
   position: absolute;
   bottom: 0;
}

.anim_loc {
   background: url('https://photo.fujibikes.com.vn/statics/anim/anim-loc.png') left center;
    left: 380px;
}

.anim_tho {
   background: url('https://photo.fujibikes.com.vn/statics/anim/anim-tho.png') left center;
    right: 150px;
}

.anim_phuc {
   background: url('https://photo.fujibikes.com.vn/statics/anim/anim-phuc.png') left center;
   left: 150px;
}

@keyframes anim_play {
   100% { background-position: -6400px; }
}

@-webkit-keyframes anim_play {
    100% { background-position: -6400px; }
}

@-moz-keyframes anim_play {
    100% { background-position: -6400px; }
}

@-o-keyframes anim_play {
    100% { background-position: -6400px; }
}

@-ms-keyframes anim_play {
    100% { background-position: -6400px; }
}

</style>
    
<div class="centerdiv fixheight">
         <div class="thetree">
                                <div class="anim_phuc"></div>
            <div class="anim_tho"></div>
            <div class="anim_loc"></div>
                      </div>
</div>
  Bài viết hay nhất2
Thanks thớt nha. Đẹp lắm :x
  Bài viết hay nhất3
.PNG còn nặng hơn cả .JPG hoặc .JPEG nữa chứ nhẹ hơn gì chú
  Bài viết hay nhất4

KTV2 wrote:.PNG còn nặng hơn cả .JPG hoặc .JPEG nữa chứ nhẹ hơn gì chú
Ý mình là không sử dụng GIF và flash nên load nhanh và không làm 4rum bị giật. Mình thấy fm mọi người đa số toàn dùng ảnh .PNG chứ ít dùng .JPG
  Bài viết hay nhất5

anhdausai wrote:
KTV2 wrote:.PNG còn nặng hơn cả .JPG hoặc .JPEG nữa chứ nhẹ hơn gì chú
Ý mình là không sử dụng GIF và flash nên load nhanh và không làm 4rum bị giật. Mình thấy fm mọi người đa số toàn dùng ảnh .PNG chứ ít dùng .JPG

Dùng png là chuẩn rồi. JPG chỉ dùng làm background là thích hợp vì nó ko có chế độ trong suốt.
  Bài viết hay nhất6

anhdausai wrote:
KTV2 wrote:.PNG còn nặng hơn cả .JPG hoặc .JPEG nữa chứ nhẹ hơn gì chú
Ý mình là không sử dụng GIF và flash nên load nhanh và không làm 4rum bị giật. Mình thấy fm mọi người đa số toàn dùng ảnh .PNG chứ ít dùng .JPG
Dùng .gif sẽ nhẹ gấp 10 lần .png, tốc độ load nhanh hơn.
  Bài viết hay nhất7
Người ta rip chứ có phải tự làm đâu mà các thím cứ chém vụ đuôi ảnh làm gì. :v

Ps: Dùng GIF chẳng thể nào nhẹ hơn được chứ đừng nói 10 lần, không tin thì thử làm 1 ảnh GIF với chất lượng như dùng PNG+CSS3 này đi. Hơn nữa, cách này còn có thể giới hạn frame, còn GIF là lặp vô hạn.
  Bài viết hay nhất8

Zzbaivong wrote:Người ta rip chứ có phải tự làm đâu mà các thím cứ chém vụ đuôi ảnh làm gì. :v

Ps: Dùng GIF chẳng thể nào nhẹ hơn được chứ đừng nói 10 lần, không tin thì thử làm 1 ảnh GIF với chất lượng như dùng PNG+CSS3 này đi. Hơn nữa, cách này còn có thể giới hạn frame, còn GIF là lặp vô hạn.

Mình lúc trước hay dùng flash 8 làm stick figure, khi export ra .gif với hơn 300f ảnh animation /t1068-topic  mà dung lượng chỉ khoảng 600-800kb .
  Bài viết hay nhất9
Vậy làm cho 3 ảnh này đi.
  Bài viết hay nhất10
@Draudrey: Vậy bạn thử làm cho 3 ảnh này nhé. Hơn 30 Frame thôi, chắc gọn nhẹ nhỉ. < 300kB và giữ nguyên độ HQ nhé ;)
  Bài viết hay nhất11

KirigayaKazuto wrote:@Draudrey: Vậy bạn thử làm cho 3 ảnh này nhé. Hơn 30 Frame thôi, chắc gọn nhẹ nhỉ. < 300kB và giữ nguyên độ HQ nhé ;)
Ơ, giữ nguyên hq thì không thể r. ((:
You cannot reply to topics in this forum