HTML/CSS 2 Robot Bay Lên Bay Xuống Cho Banner

Để tạo hiệu ứng 2 con robot bay lên, bay xuống bằng hình ảnh trong HTML và CSS, bạn có thể sử dụng animation keyframes. Dưới đây là đoạn mã giúp bạn tạo hiệu ứng này một cách đơn giản và dễ áp dụng cho banner:

HTML/CSS 2 Robot bay lên bay xuống cho banner

HTML

<div class="img_small_robot">
	<img src="https://tunlamweb.com/wp-content/themes/flatsome-child/img/small_robot.svg" alt="Robot" loading="lazy" decoding="async">
</div>
<div class="img_big_robot">
	<img src="https://tunlamweb.com/wp-content/themes/flatsome-child/img/big_robot.svg" alt="Robot" loading="lazy" decoding="async">
</div>

</div>

</div>

CSS trong style.css

.img_small_robot {
    position: absolute;
    left: -200px;
    top: -30px;
    -webkit-animation: small_robot_fly 300ms infinite ease-in-out;
    animation: small_robot_fly 300ms infinite ease-in-out;
    animation-duration: 3.5s;
}
.img_big_robot {
    width: 284px;
    margin-bottom: -90px;
    bottom: 50px;
    right: -230px;
    position: absolute;
    -webkit-animation: big_robot_animation 300ms infinite ease-in-out;
    animation: big_robot_animation 300ms infinite ease-in-out;
    animation-duration: 3.5s;
}
@keyframes small_robot_fly {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(50px);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes big_robot_animation {
    0% {
        transform: translateY(20px);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(20px);
    }
}

.img_small_robot {

position: absolute;

left: -200px;

top: -30px;

-webkit-animation: small_robot_fly 300ms infinite ease-in-out;

animation: small_robot_fly 300ms infinite ease-in-out;

animation-duration: 3.5s;

}

.img_big_robot {

width: 284px;

margin-bottom: -90px;

bottom: 50px;

right: -230px;

position: absolute;

-webkit-animation: big_robot_animation 300ms infinite ease-in-out;

animation: big_robot_animation 300ms infinite ease-in-out;

animation-duration: 3.5s;

}

@keyframes small_robot_fly {

0% {

transform: translateY(0);

}

50% {

transform: translateY(50px);

}

100% {

transform: translateY(0);

}

@keyframes big_robot_animation {

0% {

transform: translateY(20px);

}

50% {

transform: translateY(0);

}

100% {

transform: translateY(20px);

}

Cách hoạt động:

HTML:

Xem thêm bài viết khác

Tạo banner chứa 2 hình ảnh robot (robot1.png và robot2.png).
Thêm class khác nhau cho mỗi robot để có thể tùy chỉnh riêng.

CSS:

@keyframes: Tạo hiệu ứng bay lên và xuống bằng translateY.
animation: Gắn animation cho hình ảnh với thời gian 3s, lặp vô hạn, và hiệu ứng chuyển động ease-in-out.
animation-delay: Làm lệch pha giữa hai robot để chúng bay không đồng bộ.

Hiệu ứng:

Robot 1 bay lên và xuống với hiệu ứng mượt.
Robot 2 bay lên và xuống nhưng bắt đầu muộn hơn 1.5 giây.

Kết quả:

Một banner với nền bầu trời gradient.
2 con robot bay lên và xuống nhẹ nhàng, lệch pha tạo cảm giác tự nhiên và sinh động.

Lưu ý:

Thay đổi hình ảnh robot1.png và robot2.png bằng hình ảnh robot mà bạn muốn sử dụng.
Bạn có thể điều chỉnh kích thước, tốc độ bay và khoảng cách bay bằng cách thay đổi các giá trị trong animation và keyframes.

Chúc bạn tạo được banner ấn tượng và sống động!