-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.less
43 lines (40 loc) · 1.08 KB
/
styles.less
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
// http://codepen.io/Bidji/pen/dPEzwq
.anim-rainbow-color(@delay: 0s) {
animation: rainbow-color-keyframes 0.6s @delay linear infinite;
}
@keyframes rainbow-color-keyframes {
0% {
color: #0057B8;
}
20% {
color: #F11E4A;
}
40% {
color: #F8A527;
}
60% {
color: #266D7F;
}
80% {
color: #82A;
}
100% {
color: #0057B8;
}
}
.rainbow {
span:nth-child(1) { .anim-rainbow-color(0.1s); }
span:nth-child(2) { .anim-rainbow-color(0.15s); }
span:nth-child(3) { .anim-rainbow-color(0.2s); }
span:nth-child(4) { .anim-rainbow-color(0.25s); }
span:nth-child(5) { .anim-rainbow-color(0.3s); }
span:nth-child(6) { .anim-rainbow-color(0.35s); }
span:nth-child(7) { .anim-rainbow-color(0.4s); }
span:nth-child(8) { .anim-rainbow-color(0.45s); }
span:nth-child(9) { .anim-rainbow-color(0.5s); }
span:nth-child(10) { .anim-rainbow-color(0.55s); }
span:nth-child(11) { .anim-rainbow-color(0.6s); }
span:nth-child(12) { .anim-rainbow-color(0.65s); }
span:nth-child(13) { .anim-rainbow-color(0.7s); }
span:nth-child(14) { .anim-rainbow-color(0.75s); }
}