Skip to content

Instantly share code, notes, and snippets.

@Xinchro

Xinchro/index.html

Created May 25, 2017 22:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Xinchro/292e1848d81dde0c965d04870ab41ce5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Xinchro/292e1848d81dde0c965d04870ab41ce5 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/xuyewov
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
@import url('https://fonts.googleapis.com/css?family=Oswald');
html {
background: #111;
font-family: 'Oswald', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: 5vw;
color: #ccc;
text-shadow: 0 0 10px
rgb(255,255,255);
}
span:nth-of-type(1) { animation: textgradient 8s linear infinite; animation-delay: -1.2s; }
span:nth-of-type(2) { animation: textgradient 8s linear infinite; animation-delay: -1.1s; }
span:nth-of-type(3) { animation: textgradient 8s linear infinite; animation-delay: -1s; }
span:nth-of-type(4) { animation: textgradient 8s linear infinite; animation-delay: -0.9s; }
span:nth-of-type(5) { animation: textgradient 8s linear infinite; animation-delay: -0.8s; }
span:nth-of-type(6) { animation: textgradient 8s linear infinite; animation-delay: -0.7s; }
span:nth-of-type(7) { animation: textgradient 8s linear infinite; animation-delay: -0.6s; }
span:nth-of-type(8) { animation: textgradient 8s linear infinite; animation-delay: -0.5s; }
span:nth-of-type(9) { animation: textgradient 8s linear infinite; animation-delay: -0.4s; }
span:nth-of-type(10) { animation: textgradient 8s linear infinite; animation-delay: -0.3s; }
span:nth-of-type(11) { animation: textgradient 8s linear infinite; animation-delay: -0.2s; }
span:nth-of-type(12) { animation: textgradient 8s linear infinite; animation-delay: -0.1s; }
span:nth-of-type(13) { animation: textgradient 8s linear infinite; animation-delay: 0s; }
@keyframes textgradient {
0% {
text-shadow: 0 0 10px rgb(255,0,0);
}
33.3% {
text-shadow: 0 0 10px rgb(0,255,0);
}
66.6% {
text-shadow: 0 0 10px rgb(0,0,255);
}
100% {
text-shadow: 0 0 10px rgb(255,0,0);
}
}
</style>
</head>
<body>
<h1><span>C</span><span>o</span><span>m</span><span>i</span><span>n</span><span>g</span><span> </span><span>s</span><span>o</span><span>o</span><span>n</span><span>&trade;</span><span>!</span> </h1>
<script id="jsbin-source-css" type="text/css">@import url('https://fonts.googleapis.com/css?family=Oswald');
html {
background: #111;
font-family: 'Oswald', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: 5vw;
color: #ccc;
text-shadow: 0 0 10px
rgb(255,255,255);
}
span:nth-of-type(1) { animation: textgradient 8s linear infinite; animation-delay: -1.2s; }
span:nth-of-type(2) { animation: textgradient 8s linear infinite; animation-delay: -1.1s; }
span:nth-of-type(3) { animation: textgradient 8s linear infinite; animation-delay: -1s; }
span:nth-of-type(4) { animation: textgradient 8s linear infinite; animation-delay: -0.9s; }
span:nth-of-type(5) { animation: textgradient 8s linear infinite; animation-delay: -0.8s; }
span:nth-of-type(6) { animation: textgradient 8s linear infinite; animation-delay: -0.7s; }
span:nth-of-type(7) { animation: textgradient 8s linear infinite; animation-delay: -0.6s; }
span:nth-of-type(8) { animation: textgradient 8s linear infinite; animation-delay: -0.5s; }
span:nth-of-type(9) { animation: textgradient 8s linear infinite; animation-delay: -0.4s; }
span:nth-of-type(10) { animation: textgradient 8s linear infinite; animation-delay: -0.3s; }
span:nth-of-type(11) { animation: textgradient 8s linear infinite; animation-delay: -0.2s; }
span:nth-of-type(12) { animation: textgradient 8s linear infinite; animation-delay: -0.1s; }
span:nth-of-type(13) { animation: textgradient 8s linear infinite; animation-delay: 0s; }
@keyframes textgradient {
0% {
text-shadow: 0 0 10px rgb(255,0,0);
}
33.3% {
text-shadow: 0 0 10px rgb(0,255,0);
}
66.6% {
text-shadow: 0 0 10px rgb(0,0,255);
}
100% {
text-shadow: 0 0 10px rgb(255,0,0);
}
}</script>
</body>
</html>
Raw
jsbin.xuyewov.css
@import url('https://fonts.googleapis.com/css?family=Oswald');
html {
background: #111;
font-family: 'Oswald', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: 5vw;
color: #ccc;
text-shadow: 0 0 10px
rgb(255,255,255);
}
span:nth-of-type(1) { animation: textgradient 8s linear infinite; animation-delay: -1.2s; }
span:nth-of-type(2) { animation: textgradient 8s linear infinite; animation-delay: -1.1s; }
span:nth-of-type(3) { animation: textgradient 8s linear infinite; animation-delay: -1s; }
span:nth-of-type(4) { animation: textgradient 8s linear infinite; animation-delay: -0.9s; }
span:nth-of-type(5) { animation: textgradient 8s linear infinite; animation-delay: -0.8s; }
span:nth-of-type(6) { animation: textgradient 8s linear infinite; animation-delay: -0.7s; }
span:nth-of-type(7) { animation: textgradient 8s linear infinite; animation-delay: -0.6s; }
span:nth-of-type(8) { animation: textgradient 8s linear infinite; animation-delay: -0.5s; }
span:nth-of-type(9) { animation: textgradient 8s linear infinite; animation-delay: -0.4s; }
span:nth-of-type(10) { animation: textgradient 8s linear infinite; animation-delay: -0.3s; }
span:nth-of-type(11) { animation: textgradient 8s linear infinite; animation-delay: -0.2s; }
span:nth-of-type(12) { animation: textgradient 8s linear infinite; animation-delay: -0.1s; }
span:nth-of-type(13) { animation: textgradient 8s linear infinite; animation-delay: 0s; }
@keyframes textgradient {
0% {
text-shadow: 0 0 10px rgb(255,0,0);
}
33.3% {
text-shadow: 0 0 10px rgb(0,255,0);
}
66.6% {
text-shadow: 0 0 10px rgb(0,0,255);
}
100% {
text-shadow: 0 0 10px rgb(255,0,0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment