-
Notifications
You must be signed in to change notification settings - Fork 21
/
rainbows.css
64 lines (62 loc) · 2.66 KB
/
rainbows.css
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
/*
* CSS animated rainbow dividers of awesome
* by Chris Heilmann @codepo8 and Lea Verou @leaverou
**/
@-moz-keyframes charlieeee {
from { background-position:top left; }
to {background-position:top right; }
}
@-webkit-keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
@-o-keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
@-ms-keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
@-khtml-keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
@keyframes charlieeee {
from { background-position:top left; }
to { background-position:top right; }
}
.catchadream{
background-image:-webkit-linear-gradient( left, red, orange, yellow, green,
blue, indigo, violet, indigo, blue,
green, yellow, orange, red );
background-image:-moz-linear-gradient( left, red, orange, yellow, green,
blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
background-image:-o-linear-gradient( left, red, orange, yellow, green,
blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
background-image:-ms-linear-gradient( left, red, orange, yellow, green,
blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
background-image:-khtml-linear-gradient( left, red, orange, yellow, green,
blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
background-image:linear-gradient( left, red, orange, yellow, green,
blue,indigo, violet, indigo, blue,
green, yellow, orange,red );
-moz-animation:charlieeee 2.5s forwards linear infinite;
-webkit-animation:charlieeee 2.5s forwards linear infinite;
-o-animation:charlieeee 2.5s forwards linear infinite;
-khtml-animation:charlieeee 2.5s forwards linear infinite;
-ms-animation:charlieeee 2.5s forwards linear infinite;
-lynx-animation:charlieeee 2.5s forwards linear infinite;
animation:charlieeee 2.5s forwards linear infinite;
background-size:50% auto;
}
#tongue{position:cheek;}
/* ^ OMG! An ID! That kills performance! */
/*
.catchadream:after{content:'廌'}
*/
/* ^ uncomment to add unicorn */