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!