Tutorial 2x Xmas time! Snow animation header - Hiệu ứng tuyết rơi trên header cho XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,007
Được Like
11,351
Xmas time! Snow animation header - Hiệu ứng tuyết rơi trên header cho XenForo 2

Thay đổi header của bạn thành một hình ảnh đẹp với hiệu ứng tuyết rơi.

Lm2Fmu0.png

Tải xuống file đính kèm và đặt chúng trong thư mục images/snow.
Cách đơn giản nhất để tạo header này là advertisement.

Đầu tiên bạn phải tạo một advertisement mới (hoặc chỉnh sửa một advertisement hiện có). (/admin.php?advertising/)
Chọn vị trí "Container breadcrumb (top): Above".
Thêm đoạn code sau vào phần HTML:
Mã:
<style>

#header{

    background-image: url('/images/snow/s1.png'), url('/images/snow/s2.png'), url('/images/snow/s3.png');

    width: 100%;

    z-index:1;

    -webkit-animation: snow 10s linear infinite;

    -moz-animation: snow 10s linear infinite;

    -ms-animation: snow 10s linear infinite;

    animation: snow 10s linear infinite;

}

@keyframes snow {

  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}

  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}

}

@-moz-keyframes snow {

  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}

  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}

}

@-webkit-keyframes snow {

  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}

  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}

}

@-ms-keyframes snow {

  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}

  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}

  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}

}

 

</style>

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Đính kèm

  • snow_images_kodi-forum.nl.zip
    8.7 KB · Lượt xem: 13
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Tips and Guides 3

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom