Skip to content

Instantly share code, notes, and snippets.

@dannycjones

dannycjones/username_colour_change.css

Created May 10, 2014 09:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dannycjones/0e5727300668139a9fec to your computer and use it in GitHub Desktop.
Save dannycjones/0e5727300668139a9fec to your computer and use it in GitHub Desktop.
Download ZIP
Raw
username_colour_change.css
@-webkit-keyframes rainbow {
0% {color: #39f;
text-shadow: 0px 0px 6px #39f;}
15% {color: #8bc5d1;
text-shadow: 0px 0px 6px #8bc5d1;}
30% {color: #f8cb4a;
text-shadow: 0px 0px 6px #f8cb4a;}
45% {color: #95b850;
text-shadow: 0px 0px 6px #95b850;}
60% {color: #944893;
text-shadow: 0px 0px 6px #944893;}
75% {color: #c71f00;
text-shadow: 0px 0px 6px #c71f00;}
90% {color: #bdb280;
text-shadow: 0px 0px 6px #bdb280;}
100% {color: #39f;
text-shadow: 0px 0px 6px #39f;}
}
@-moz-keyframes rainbow {
0% {color: #39f;
text-shadow: 0px 0px 6px #39f;}
15% {color: #8bc5d1;
text-shadow: 0px 0px 6px #8bc5d1;}
30% {color: #f8cb4a;
text-shadow: 0px 0px 6px #f8cb4a;}
45% {color: #95b850;
text-shadow: 0px 0px 6px #95b850;}
60% {color: #944893;
text-shadow: 0px 0px 6px #944893;}
75% {color: #c71f00;
text-shadow: 0px 0px 6px #c71f00;}
90% {color: #bdb280;
text-shadow: 0px 0px 6px #bdb280;}
100% {color: #39f;
text-shadow: 0px 0px 6px #39f;}
}
@keyframes rainbow {
0% {color: #39f;
text-shadow: 0px 0px 6px #39f;}
15% {color: #8bc5d1;
text-shadow: 0px 0px 6px #8bc5d1;}
30% {color: #f8cb4a;
text-shadow: 0px 0px 6px #f8cb4a;}
45% {color: #95b850;
text-shadow: 0px 0px 6px #95b850;}
60% {color: #944893;
text-shadow: 0px 0px 6px #944893;}
75% {color: #c71f00;
text-shadow: 0px 0px 6px #c71f00;}
90% {color: #bdb280;
text-shadow: 0px 0px 6px #bdb280;}
100% {color: #39f;
text-shadow: 0px 0px 6px #39f;}
}
@-webkit-keyframes blackToPurple {
0% {color: #000;
text-shadow: 0px 0px 6px #000;}
50% {color: #7000ff;
text-shadow: 0px 0px 6px #7000ff;}
100% {color: #000;
text-shadow: 0px 0px 6px #000;}
}
@-moz-keyframes blackToPurple {
0% {color: #000;
text-shadow: 0px 0px 6px #000;}
50% {color: #7000ff;
text-shadow: 0px 0px 6px #7000ff;}
100% {color: #000;
text-shadow: 0px 0px 6px #000;}
}
@keyframes blackToPurple {
0% {color: #000;
text-shadow: 0px 0px 6px #000;}
50% {color: #7000ff;
text-shadow: 0px 0px 6px #7000ff;}
100% {color: #000;
text-shadow: 0px 0px 6px #000;}
}
@-webkit-keyframes blackToRed {
0% {color: #000;
text-shadow: 0px 0px 6px #000;}
50% {color: #e11919;
text-shadow: 0px 0px 6px #e11919;}
100% {color: #000;
text-shadow: 0px 0px 6px #000;}
}
@-moz-keyframes blackToRed {
0% {color: #000;
text-shadow: 0px 0px 6px #000;}
50% {color: #e11919;
text-shadow: 0px 0px 6px #e11919;}
100% {color: #000;
text-shadow: 0px 0px 6px #000;}
}
@keyframes blackToRed {
0% {color: #000;
text-shadow: 0px 0px 6px #000;}
50% {color: #e11919;
text-shadow: 0px 0px 6px #e11919;}
100% {color: #000;
text-shadow: 0px 0px 6px #000;}
}
@-webkit-keyframes blueToBlue {
0% {color: #003378;
text-shadow: 0px 0px 6px #003378;}
50% {color: #0192cf;
text-shadow: 0px 0px 6px #0192cf;}
100% {color: #003378;
text-shadow: 0px 0px 6px #003378;}
}
@-moz-keyframes blueToBlue {
0% {color: #003378;
text-shadow: 0px 0px 6px #003378;}
50% {color: #0192cf;
text-shadow: 0px 0px 6px #0192cf;}
100% {color: #003378;
text-shadow: 0px 0px 6px #003378;}
}
@keyframes blueToBlue {
0% {color: #003378;
text-shadow: 0px 0px 6px #003378;}
50% {color: #0192cf;
text-shadow: 0px 0px 6px #0192cf;}
100% {color: #003378;
text-shadow: 0px 0px 6px #003378;}
}
.username_rainbow {
-webkit-animation-direction: normal;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: rainbow;
-webkit-animation-timing-function: ease;
-moz-animation-direction: normal;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: rainbow;
-moz-animation-timing-function: ease;
animation-direction: normal;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-name: rainbow;
animation-timing-function: ease;
}
.username_blackToPurple {
-webkit-animation-direction: normal;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blackToPurple;
-webkit-animation-timing-function: ease;
-moz-animation-direction: normal;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: blackToPurple;
-moz-animation-timing-function: ease;
animation-direction: normal;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-name: blackToPurple;
animation-timing-function: ease;
}
.username_blackToRed {
-webkit-animation-direction: normal;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blackToRed;
-webkit-animation-timing-function: ease;
-moz-animation-direction: normal;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: blackToRed;
-moz-animation-timing-function: ease;
animation-direction: normal;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-name: blackToRed;
animation-timing-function: ease;
}
.username_blueToBlue {
-webkit-animation-direction: normal;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blueToBlue;
-webkit-animation-timing-function: ease;
-moz-animation-direction: normal;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: blueToBlue;
-moz-animation-timing-function: ease;
animation-direction: normal;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-name: blueToBlue;
animation-timing-function: ease;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment