Tạo hiệu ứng tuyết rơi bằng css3

reset and begin

1/18/2016

ngoài các cách sử dụng jquery đã từng biết để thêm tuyết rơi vào trang web , bạn có thể làm cho background của mình chuyển mình với tuyết 1 cách đẹp hơn .

Chỉ bằng css3 ta có thể trang trí cho trang của bạn thêm phần sinh động với hiệu ứng tuyết rơi
cách làm hiệu ứng tuyết rơi đơn giản với css3 :

B1 :phần css thêm

<style>
body { background-color:#333; }
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://static.phim.megabox.vn/themes/front/images/animated-snowflake-1.png'),url('http://static.phim.megabox.vn/themes/front/images/animated-snowflake-2.png'),url('http://static.phim.megabox.vn/themes/front/images/animated-snowflake-3.png') !important;    height: 100%;
min-height: 100% !important;

background-color: #FFFFFF;
   -webkit-animation: snow 11s linear infinite;
   -moz-animation: snow 11s linear infinite;
   -ms-animation: snow 11s linear infinite;
   animation: snow 11s linear infinite;
}

@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
100% {background-position: 500px 1000px, 400px 400px, 600px 600px; }
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
100% {background-position: 500px 1000px, 400px 400px, 600px 600px; }
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
100% {background-position: 500px 1000px, 400px 400px, 600px 600px; }
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
100% {background-position: 500px 1000px, 400px 400px, 600px 600px; }
}
</style>

và
B2 thay

<body> bằng <body id="snow">

B3 lưu ảnh 3 bông tuyết phòng khi host die
http://static.phim.megabox.vn/themes/front/images/animated-snowflake-1.png
http://static.phim.megabox.vn/themes/front/images/animated-snowflake-2.png
http://static.phim.megabox.vn/themes/front/images/animated-snowflake-3.png