Bài viết được đăng tại nguyenlediep.com - không copy dưới mọi hình thức.
NLD Code - Tạo hình nền (background) mây bay cho website bằng CSS3. Ở bài viết này IOTG sẽ hướng dẫn cho các bạn tạo nền trang web dạng mây bay bằng CSS3 và HTML thuần.
Tạo hình nền (background) mây bay cho website bằng CSS3. Ở bài viết này IOTG sẽ hướng dẫn cho các bạn tạo nền trang web dạng mây bay bằng CSS3 và HTML thuần.
Chuẩn bị nguyên liệu để làm nền mây bay
- Tải hình nền đám mây về máy tính ở đây, sao chép hình vừa tải vào thư mục bg.
Tạo trang index.html với đoạn code sau
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="shortcut icon" type="image/x-icon" href="images/icon.nldcode.com.png" /> <title>Tạo hình nền (background) mây bay cho website bằng CSS3</title> </head> <body> </body> </html>
Thêm tag section với class may-bay
<section class="may-bay"></section>
Viết code css3 hiệu ứng may-bay
@keyframes may-bay {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
@-webkit-keyframes may-bay {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
@-ms-keyframes may-bay {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
@-moz-keyframes may-bay {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
Viết code css class may-bay và gắn hiệu ứng may-bay
.may-bay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
margin: 0px;
padding: 0px;
background: url(images/bg-may-bay.png) center top repeat-x;
animation: may-bay 10s linear infinite;
-ms-animation: may-bay 10s linear infinite;
-moz-animation: may-bay 10s linear infinite;
-webkit-animation: may-bay 10s linear infinite;
z-index: 0;
}
Code hoàn chỉnh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="images/icon.nldcode.com.png" />
<title>Tạo hình nền (background) mây bay cho website bằng CSS3</title>
<style type="text/css">
body{
background-color: #c0deed;
}
.may-bay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
margin: 0px;
padding: 0px;
background: url(images/bg-may-bay.png) center top repeat-x;
animation: may-bay 10s linear infinite;
-ms-animation: may-bay 10s linear infinite;
-moz-animation: may-bay 10s linear infinite;
-webkit-animation: may-bay 10s linear infinite;
z-index: 0;
}
@keyframes may-bay {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
@-webkit-keyframes may-bay {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
@-ms-keyframes may-bay {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
@-moz-keyframes may-bay {
from {
background-position: 0 0;
} to {
background-position: 100% 0;
};
}
</style>
</head>
<body>
<section class="may-bay"></section>
</body>
</html>
Lưu ý: Thay đổi đường dẫn đến bg-may-bay.png nếu bạn bỏ nó trong thư mục khác.
