Trước đây mình đã giới thiệu cho các bạn nhiều hiệu ứng tạo loader bằng CSS thuần như Hiệu ứng loading theo kiểu Windows phone với CSS3 và Tạo hiệu ứng loading theo phong cách Facebook bằng CSS3 . Hôm nay mình tiếp tục giới thiệu cho các bạn một hiệu ứng cũng đẹp không kém khác, với hiệu ứng này, các bạn có thể áp dụng nhiều cho các dự án web hay dùng cho blog của mình.
HTML
<div class="container">
<div class="part"></div>
<div class="part"></div>
<div class="part"></div>
<div class="part"></div>
<div class="part"></div>
</div>
CSS
Và sau đây là toàn bộ đoạn code css giúp các bạn tạo hiệu ứng loading đẹp mắt.
html {
height: 100%;
min-height: 100%;
}
body {
height: 100%;
background: #51b8e2;
}
.container {
width: 100%;
height: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.container .part {
width: 40px;
height: 40px;
margin-left: 45px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #51b8e2;
border-radius: 4px;
border: 2px solid #fff;
-webkit-transition: background 100ms linear;
transition: background 100ms linear;
-webkit-animation: change 950ms linear infinite;
animation: change 950ms linear infinite;
}
.container .part:nth-child(1) {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.container .part:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.container .part:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.container .part:nth-child(4) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.container .part:nth-child(5) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@-webkit-keyframes change {
0% {
border-radius: 4px;
}
17.5% {
border-radius: 4px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 4px;
}
100% {
border-radius: 4px;
}
}
@keyframes change {
0% {
border-radius: 4px;
}
17.5% {
border-radius: 4px;
}
50% {
border-radius: 100%;
background: rgba(255,255,255,0.4);
}
93.5% {
border-radius: 4px;
}
100% {
border-radius: 4px;
}
}
Chắc chắn là qua bài viết này, các bạn sẽ có thêm một lựa chọn cho trang web của mình, cũng như học thêm nhiều thủ thuật về css để có thể tự tay sáng tạo thêm nhiều hiệu ứng khác cho riêng mình.