Hôm nay, AllXOne sẽ giới thiệu cho các bạn các tạo hiệu ứng tuyết rơi chỉ bằng html và css (không sử dụng JavaScript).
Đầu tiên, các bạn cần chuẩn bị 2 ảnh, gồm background và ảnh tuyết rơi ở định dạng png. Nếu chưa tìm ảnh phù hợp các bạn có thể tải ảnh tại đây.
Tiếp theo, các bạn tạo thư mục chứa ảnh, file html và css (có thể tham khảo cấu trúc như hình)
Tại index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="section">
<div class="snow1"></div>
<div class="snow2"></div>
</div>
</body>
</html> Tại Css:
body
{
margin:0;
padding:0;
}
.section
{
background:url(image/background.jpg);
background-size:cover;
width:100%;
height:650px;
position:relative;
overflow:hidden;
}
.snow1
{
background:url(image/now.png);
background-repeat:repeat;
width:100%;
height:650px;
position:absolute;
top:0;
left:0;
animation:animateOne 10s infinite linear;
}
.snow2
{
background:url(image/snow.png);
background-repeat:repeat;
width:100%;
height:650px;
position:absolute;
top:0;
left:0;
animation:animateSecond 10s infinite linear;
}
@keyframes animateOne
{
0%
{
background-position: 0px 0px
}
100%
{
background-position: 100px 650px
}
}
@keyframes animateSecond
{
0%
{
background-position: 0px -100px
}
100%
{
background-position: 0px 650px
}
}
Như vậy là chúng ta đã có một backround động với hiệu ứng tuyêt rơi cực đơn giản rồi.
Chúc các bạn thành công.