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

[PVS]

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.

​

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:

<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​