Thứ Sáu, ngày 18 tháng 11 năm 2016

Share CODE Hiệu Ứng Loader 7 sắc cầu vòng với CSS3

Hiệu Ứng Loader hay còn gọi Hiệu Ứng Tải Trang Web khi chưa xong chắc nhiều bạn đã biết. CODE này sẽ giúp cho trang web của các bạn nhìn chuyên nghiệp hơn. Với hiệu ứng CSS3 chắc chắn sẽ không làm các bạn thất vọng


HTML

Đầu tiên thì vẫn là khung chuẩn html cho hiệu ứng loading.
1
2
3
4
5
6
7
8
9
10
11
12
<span style="color:#000000;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><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></span></span></span>

CSS

Và các bạn chỉ việc copy thêm đoạn css sau vào bên dưới.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<span style="color:#000000;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">*,
*::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)
  }
}</span></span></span>
Vậy là xong, mình 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 !