Duck hunt

ChiaSeIT.Mobie.In

Tạo hiệu ứng loading 7 sắc cầu vòng với CSS3

Chào các bạn ! Đã lâu lắm rồi mình mới có thể post thêm một bài viết mới cho các bạn. Hôm nay mình sẽ mang đến cho các bạn một hiệu ứng loading cực pro cho các trang web hay blog mà các bạn đang sở hữu , với chỉ vài dòng css đơn giản.



Đầu tiên thì vẫn là khung chuẩn html cho hiệu ứng loading.

<div id="container">
<div class="item" id="i1"></div>
<div class="item" id="i2"></div>
<div class="item" id="i3"></div>
<div class="item" id="i4"></div>
<div class="item" id="i5"></div>
<div class="item" id="i6"></div>
<div class="item" id="i7"></div>
<div class="item" id="i8"></div>
<div class="item" id="i9"></div>
<div class="item" id="i10"></div>
</div>


Và các bạn chỉ việc copy thêm đoạn css sau vào bên dưới.

*,
*::after,
*::before {
box-sizing: border-box;
transform-style: preserve-3d;
}

body {
perspective: 2000px;
height: 100vh;
width: 100vw;
margin: 0;
background: radial-gradient(circle at 50% 50%, #fff 0%, #7EC0EE 200%);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-family: 'Roboto';
font-weight: 300
}

#container {
width: 80px;
height: 80px;
}

.item {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 10px;
background: hsla(0, 75%, 50%, 0.5);
margin: -5px 0 0 -30px;
animation: rot 5s infinite;
}

#i2 {
animation-delay: 0.12s;
background: hsla(36, 100%, 70%, 0.5);
}

#i3 {
animation-delay: 0.24s;
background: hsla(72, 100%, 70%, 0.5);
}

#i4 {
animation-delay: 0.36s;
background: hsla(108, 100%, 70%, 0.5);
}

#i5 {
animation-delay: 0.48s;
background: hsla(144, 100%, 70%, 0.5);
}

#i6 {
animation-delay: 0.60s;
background: hsla(180, 100%, 70%, 0.5);
}

#i7 {
animation-delay: 0.72s;
background: hsla(216, 100%, 70%, 0.5);
}

#i8 {
animation-delay: 0.84s;
background: hsla(252, 100%, 70%, 0.5);
}

#i9 {
animation-delay: 0.96s;
background: hsla(288, 100%, 70%, 0.5);
}

#i10 {
animation-delay: 1.08s;
background: hsla(324, 100%, 70%, 0.5);
}

@keyframes rot {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}


Vậy là xong, ChiaseIT.Mobie.In mong các bạn có thể áp dụng thành công hiệu ứng này trong các website của mình.
Chúc các bạn thành công !

Download


Bình luận
Từ Khóa
Tạo hiệu ứng loading 7 sắc cầu vòng với CSS3 , Chào, các, bạn, !, Đã, lâu, lắm, rồi, mình, mới, có, thể, post, thêm, một, bài, , Tìm hiểu Tạo hiệu ứng loading 7 sắc cầu vòng với CSS3 làm theo và học hỏi , Bài viết Hot Tạo hiệu ứng loading 7 sắc cầu vòng với CSS3 ,
Cùng Chuyên Mục
Tạo Login Form giống WordPress Admin với CSS3 và jQuery
Tạo modal window với HTML5 và CSS3
Thiết kế mẫu đồng hồ đếm ngược cực ấn tượng với CSS3
Tạo Tooltip bằng CSS3
Tạo hiệu ứng cầu vòng tuyệt đẹp cho văn bản bằng CSS3
Hướng dẫn làm Form Login style Facebook đẹp
Share Hiệu ứng Preload với CSS3 Đẹp đầy màu sắc cực ảo
CSS3 Hiệu Ứng Loading Đẹp Windows 8 cho mọi Wap/Web
Làm thẻ Tiêu đề tự đổi màu với CSS
Tạo hiệu ứng đèn nhấp nháy với Notepad , CSS, JavaScript
Chia sẻ coding miễn phí © 2017
Thiết kế: Mạnh Tuân

1.4% sitemap.xml robots.txt U-ONC-STAT