[CSS3] Tạo banner header động đẹp lunh linh

Bài này Boy đăng từ hồi tháng 5 h mới có dịp đem ra xài lại . Nhìn qua chảng ai có thể nghĩ là dùng CSS đâu nha

​

Xem demo: http://dl.dropbox.com/u/8612983/Thu thuat WEB/CSS3_banner_snow/index.html

Mã HTML

Click xem nội dung bên trong

<div class="header">
<div class="wrapper">
<div class="christmas-tree tree1"></div>
<div class="christmas-tree tree2"></div>
<div class="christmas-tree tree3"></div>
<div class="snowman"></div>
<div class="christmas-tree tree4"></div>
<div class="christmas-tree tree5"></div>
<div class="christmas-tree tree6"></div>
</div>
</div>

Đây là nguồn ảnh sử dụng (có file PSD trong file tải zìa rùi ko cần lo nhá )

​

Mã CSS

Khi bạn đọc vào đầu của bài viết này, các quy luật của @keyframe "sự kỳ diệu" này. Ngoài ra, để giữ cho các mã sau đây càng sạch càng tốt, tôi sẽ không thêm các phiên bản tiền tố (-moz,-webkit,-ms). Và bạn có thể xem đầy đủ ở file tải về

​

Để đạt được hiệu ứng tuyết, bạn sẽ cần phải tạo hiệu ứng cho background-position background .header đầu tiên. Là một lưu ý nhanh , các trình duyệt ko hỗ trợ nhìu lớp background thì tuyết sẽ bị vô hiệu hóa

Click xem nội dung bên trong

.header{
margin: 0 0 30px;
background: url(header-bg.png);
background: url(snow-bg.png) repeat-y center, url(header-bg.png);
animation: animate-snow 9s linear infinite;
}

@keyframes animate-snow
{
0% { background-position: center 0, 0 0;}
100% { background-position: center 885px, 0 0;}
}

​

Element .wrapper cơ bản là giữ cho các cây thông và nười tuyết ở cùng nhau. Lưu ý là khai báo vị trí là position: relative

Click xem nội dung bên trong

wrapper{
width: 960px;
height: 315px;
margin: auto;
overflow: hidden;
position: relative;
background: url(wrapper-bg.png) no-repeat bottom;
}

​

Với cây thông thì animation-duration sẽ thay đổi ngẫu nhiên để tạo ra hiệu ứng đẹp nhất.

Click xem nội dung bên trong

@keyframes animate-drop {
0% {opacity:0;transform: translate(0, -315px);}
100% {opacity:1;transform: translate(0, 0);}
}

.christmas-tree,
.snowman {
position: absolute;
animation: animate-drop 1s linear;
}

.christmas-tree {
width: 112px;
height: 137px;
background: url(christmas-tree.png);
}

.snowman {
width: 115px;
height: 103px;
top: 195px;
left: 415px;
background: url(snowman.png);
animation-duration: .6s;
}

.tree1 {
top: 165px;
left: 35px;
animation-duration: .6s;
}

.tree2 {
left: 185px;
top: 175px;
animation-duration: .9s;
}

.tree3 {
left: 340px;
top: 125px;
animation-duration: .7s;
}

.tree4 {
left: 555px;
top: 155px;
animation-duration: .8s;
}

.tree5 {
left: 710px;
top: 170px;
animation-duration: .7s;
}

.tree6 {
left: 855px;
top: 125px;
animation-duration: .6s;
}

Download -> http://windowsz.net/attachments/f23...eader-dong-dep-lunh-linh-css3_banner_snow.zip