SIBEN IT - BLOGGER

Cách Tạo Hiệu Ứng Bubbles Nổi Ô Vuông Cho Blogspot

Cách Tạo Hiệu Ứng Bubbles Nổi Ô Vuông Cho Blogspot

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Năm, 6 tháng 12, 2018
Loading...

Chào mọi người đã quay lại với Blog của chúng tôi, thì hôm nay mình sẽ Share cho một đoạn css giúp tạo hiệu ứng Bubbles (nổi ô vuông trên màn hình) cho Blogspot nhé.


Cách dùng đặt sau thẻ </body>

<!--Hiệu ứng Bubbles - Sĩ Ben IT-->
<ul class='bg-header-bubbles'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
.bg-header-bubbles{top:0;left:0;width:100%;height:0;z-index:0}
.bg-header-bubbles li{position:fixed;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>
<!--Kết thúc Bubbles-->

Chúc các bạn thành  công !

Tag:

  • Blogger
  • Facebook

Không có nhận xét nào. bạn hãy là người đầu tiên.


Bài Viết Có Thể Xem Thêm