Blog / Website

Cập nhật các công nghệ mới liên quan đến lập trình web.

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…

Tạo hình nền mây bay bằng CSS3

Đầu tiên, bạn tải ảnh đám mây tại đây, sao chép vào thư mục img.

Xem demo

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!