<h1>
<span>C</span>
<span>o</span>
<span>d</span>
<span>e</span>
<span>p</span>
<span>e</span>
<span>n</span>
</h1>
@import url('https://fonts.googleapis.com/css?family=Caveat:400,700|Gochi+Hand');
body{
background: #000;
display: flex;
justify-content: center;
}
h1{
font-size: 16em;
font-family: 'Caveat', cursive;
}
h1 span{
display: block;
float: left;
animation: animate 2.25s linear infinite;
margin: 0 5px;
padding: 0;
position: relative;
color: #111;
}
h1 span:nth-child(1){
animation-delay: 0s;
}
h1 span:nth-child(2){
animation-delay: .25s;
}
h1 span:nth-child(2){
animation-delay: .5s;
}
h1 span:nth-child(3){
animation-delay: .75s;
}
h1 span:nth-child(4){
animation-delay: 1s;
}
h1 span:nth-child(5){
animation-delay: 1.25s;
}
h1 span:nth-child(6){
animation-delay: 1.5s;
}
h1 span:nth-child(7){
animation-delay: 1.75s;
}
@keyframes animate {
0%, 100%{
color: #fff;
filter: blur(2px);
text-shadow: 0 0 10px #00bbff,
0 0 20px #00bbff,
0 0 40px #00bbff,
0 0 80px #00bbff,
0 0 120px #00bbff,
0 0 200px #00bbff,
0 0 300px #00bbff,
0 0 400px #00bbff;
}
5%, 95%{
color: #111;
filter: blur(0px);
text-shadow: none;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.