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

Tài liệu
Tạo hiệu ứng các hộp hình bay lên cho trang web
Chuyên mục
Đăng vào
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!

Hiện có bình luận

Thông báo
Cảm ơn bạn đã quan tâm đến thông báo này.
Xong