• Trang web này sử dụng cookie. Tiếp tục sử dụng trang web này đồng nghĩa với việc bạn đồng ý sử dụng cookie của chúng tôi. Tìm hiểu thêm.
  • Chào toàn thể các thành viên, vào ngày 01/12/2017 CodeVn.Net chính thức đóng cửa chuyên mục Mua bán - Trao đổi - Quảng cáo vì vậy các bạn lưu ý KHÔNG spam link ở các chuyên mục khác nếu không muốn bị khóa tài khoản vĩnh viễn.

Tips & guides [2.x] Xmas time! Snow animation header 1.0

Không được phép tải xuống
Time for xmas! Change you're header to a nice one with snow animation.
Example:



Live demo: kodi-forum.nl

Download the images and place them in the folder images/snow.
The simplest way to create this header is with a advertisement (Sounds funny i know)

First you have to create a new (or edit a existing) advertisement. (/admin.php?advertising/)
I chose "Container breadcrumb (top): Above".
Add the following to the HTML:
CSS:
<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>
You can also place the css in a .less file but this is the simplest way for beginners.
I hope you and your users enjoy it!
Tác giả
kuteboy
Tải về
0
Phát hành
Mới cập nhật
Bình chọn
0.00 star(s) 0 đánh giá

Các tài nguyên khác từ kuteboy