Website 02/09/2020
Tạo hình nền mây bay bằng CSS3
Bài viết này hướng dẫn tạo hình nền mây bay bằng CSS3 thuần túy. Bạn có thể áp dụng bài viết này cho thiết kế website trang 404, hoặc một section trong Landing Page…
Đầu tiên, bạn tải ảnh đám mây tại đây, sao chép vào thư mục img
.
HTML
Hình nền sẽ là một thẻ div
.
<div id="awan"></div>
CSS
#awan { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; margin: 0px; padding: 0px; background-color: #C0DEED; background: url(./img/bg.png) center top repeat-x; animation: awan-animasi 10s linear infinite; -ms-animation: awan-animasi 10s linear infinite; -moz-animation: awan-animasi 10s linear infinite; -webkit-animation: awan-animasi 10s linear infinite; z-index: 0; } @keyframes awan-animasi { from { background-position: 0 0; } to { background-position: 100% 0; }; } @-webkit-keyframes awan-animasi { from { background-position: 0 0; } to { background-position: 100% 0; }; } @-ms-keyframes awan-animasi { from { background-position: 0 0; } to { background-position: 100% 0; }; } @-moz-keyframes awan-animasi { from { background-position: 0 0; } to { background-position: 100% 0; }; }
Lưu ý: Thay đổi đường dẫn đến bg.png
nếu bạn bỏ trong thư mục khác.
Chúc các bạn thành công!