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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,735
Được Like
12,682
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: 14
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

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom