Hỗ trợ trực tuyến

Tạo hiệu ứng các hộp hình bay lên cho trang web

Chào các bạn, bài viết này mình sẽ đem đến các bạn mẫu hiệu ứng các hộp hình bay lên trang web nhìn cực chất nha :3. Phía bên dưới là demo hình ảnh

HƯỚNG DẪN CÁCH LÀM:

Thêm đoạn toàn bộ đoạn code phía dưới, dưới menu và lưu lại
<style>
.bg-header-bubbles{top:0;left:0;width:100%;height:0;z-index:0}
.bg-header-bubbles li{position:absolute;list-style-type:none!important;display:block;width:40px;height:40px;background-color:rgba(255,255,255,0.15);bottom:-100px;-webkit-animation:square 25s infinite;animation:square 25s infinite;-webkit-transition-timing-function:linear;transition-timing-function:linear}
.bg-header-bubbles li:nth-child(1){left:10%}
.bg-header-bubbles li:nth-child(2){left:20%;width:65px;height:65px;-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-duration:17s;animation-duration:17s}
.bg-header-bubbles li:nth-child(3){left:25%;-webkit-animation-delay:4s;animation-delay:4s}
.bg-header-bubbles li:nth-child(4){left:40%;width:60px;height:60px;-webkit-animation-duration:22s;animation-duration:22s;background-color:rgba(255,255,255,0.25)}
.bg-header-bubbles li:nth-child(5){left:70%}
.bg-header-bubbles li:nth-child(6){left:80%;width:90px;height:90px;-webkit-animation-delay:3s;animation-delay:3s;background-color:rgba(255,255,255,0.2)}
.bg-header-bubbles li:nth-child(7){left:32%;width:100px;height:100px;-webkit-animation-delay:7s;animation-delay:7s}
.bg-header-bubbles li:nth-child(8){left:55%;width:20px;height:20px;-webkit-animation-delay:15s;animation-delay:15s;-webkit-animation-duration:40s;animation-duration:40s}
.bg-header-bubbles li:nth-child(9){left:25%;width:10px;height:10px;-webkit-animation-delay:2s;animation-delay:2s;-webkit-animation-duration:40s;animation-duration:40s;background-color:rgba(255,255,255,0.3)}
.bg-header-bubbles li:nth-child(10){left:90%;width:80px;height:80px;-webkit-animation-delay:11s;animation-delay:11s}
@-webkit-keyframes square {
0%{-webkit-transform:translateY(0);transform:translateY(0)}
100%{-webkit-transform:translateY(-700px) rotate(600deg);transform:translateY(-700px) rotate(600deg)}
}
@keyframes square {
0%{-webkit-transform:translateY(0);transform:translateY(0)}
100%{-webkit-transform:translateY(-700px) rotate(600deg);transform:translateY(-700px) rotate(600deg)}
}
</style>
<ul class='bg-header-bubbles'><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/></ul>
Chúc bạn thành công!

Trần Thanh Bình

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi


Cùng tham gia bình luận bài viết này nhé!

» Hãy là con người văn minh từ những câu nói

Loading...