Tiếp tục mang đến cho các bạn thêm một mẫu loading được làm hoàn toàn bằng CSS3, đây sẽ là một lựa chọn khá đẹp cho trang web hay blog của các bạn. Thông qua bài viết này, các bạn sẽ học thêm được rất nhiều về cách sử dụng các thuộc tính của CSS3 trong việc tạo một hiệu ứng động.
Download
HTML
Trước hết ,chúng ta cần có khung chuẩn html như sau :
<ul class="loader">
<li>
<div class="circle"></div>
<div class="ball"></div>
</li>
<li>
<div class="circle"></div>
<div class="ball"></div>
</li>
<li>
<div class="circle"></div>
<div class="ball"></div>
</li>
<li>
<div class="circle"></div>
<div class="ball"></div>
</li>
<li>
<div class="circle"></div>
<div class="ball"></div>
</li>
</ul>
CSS
Các bạn chỉ việc copy toàn bộ đoạn css bên dưới để tạo hiệu ứng loading.
.loader {
width: 250px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px -125px;
list-style-type: none;
}
.loader li {
float: left;
position: relative;
}
.circle {
width: 40px;
height: 40px;
border-radius: 0 0 50% 50%;
border: 4px solid #fff;
border-top: 0;
border-left: 0;
border-right: 0;
}
.ball {
position: absolute;
content: "";
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
border-radius: 100%;
background: #fff;
box-shadow: 0 -15px 0 0 rgba(255, 255, 255, 0.15), 0 -10px 0 0 rgba(255, 255, 255, 0.10), 0 -5px 0 0 rgba(255, 255, 255, 0.05);
}
.circle {
-webkit-animation: rotate 1.5s cubic-bezier(0.45, 0, 1, 1) infinite;
animation: rotate 1.5s cubic-bezier(0.45, 0, 1, 1) infinite;
}
.ball {
-webkit-animation: fall 1.5s cubic-bezier(0.95, 0, 1, 1) infinite;
animation: fall 1.5s cubic-bezier(0.95, 0, 1, 1) infinite;
}
.loader li:nth-child(1) div {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.loader li:nth-child(2) div {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.loader li:nth-child(3) div {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.loader li:nth-child(4) div {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.loader li:nth-child(5) div {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@keyframes rotate {
0%, 20% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
0%, 20% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes fall {
0%, 20% {
transform: translatey(-30px);
opacity: 0;
}
20%,
24%,
27%,
30%,
50%,
75% {
transform: translatey(0px);
opacity: 1;
}
22% {
transform: translatey(-10px)
}
25% {
transform: translatey(-6px)
}
28% {
transform: translatey(-2px)
}
30% {
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.3);
}
75%,
100% {
box-shadow: 0 -15px 0 0 rgba(255, 255, 255, 0.15), 0 -10px 0 0 rgba(255, 255, 255, 0.10), 0 -5px 0 0 rgba(255, 255, 255, 0.05);
transform: translatey(30px);
opacity: 0;
}
}
@-webkit-keyframes fall {
0%, 20% {
-webkit-transform: translatey(-30px);
opacity: 0;
}
20%,
24%,
27%,
30%,
50%,
75% {
-webkit-transform: translatey(0px);
opacity: 1;
}
22% {
-webkit-transform: translatey(-10px)
}
25% {
-webkit-transform: translatey(-6px)
}
28% {
-webkit-transform: translatey(-2px)
}
30% {
box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.3);
}
75%,
100% {
box-shadow: 0 -15px 0 0 rgba(255, 255, 255, 0.15), 0 -10px 0 0 rgba(255, 255, 255, 0.10), 0 -5px 0 0 rgba(255, 255, 255, 0.05);
-webkit-transform: translatey(30px);
opacity: 0;
}
}
Mong rằng các bạn sẽ có thể tìm được nhiều điều bổ ích từ bài viết này.