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!

5
4
3
2
1

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019