Diễn đàn Arduino Việt Nam | Tôi yêu Việt Nam
Hãy cùng đăng nhập hoặc đăng ký vào diễn đàn để cập nhật những bài viết mới và mở hết chức năng của diễn đàn nào!

Share
Go down
avatar
Administrator
Administrator
Tổng số bài gửi : 181
Points : 504
Reputation : 82
Join date : 20/07/2016
Age : 18
Đến từ : Bến Tre
Xem lý lịch thành viênhttp://vidieukhien-vn.webnode.vn/

Tạo loader 7 sắc cầu vòng với CSS3

on Sun Apr 02, 2017 6:36 pm
Chào 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.

HTML


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


Code:
<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>

CSS


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

Code:
*,
*::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 các bạn có thể áp dụng hiệu ứng này trong các website của mình rồi.
Về Đầu Trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Free forum | Khoa học | Đại học | © phpBB | Free forum support | Liên hệ | Report an abuse | Create a blog