<div id="container">
<p>D</p>
<p>O</p>
<p>S</p>
<p>K</p>
<p>I</p>
</div>
body{background-color: hsla(58, 100%, 50%);margin:0;}
#container{
width: 500px;
height: 200px;
border:5px double white;
transform: translate(10%,10%);
position: absolute;
left:10px;
}
p{
color: white;
font-size: 120px;
text-align: center;
float: left;
font-weight: bold;
position: relative;
top: -90px;
left: 10px;
letter-spacing: 15px;
animation:change 5s infinite;
opacity: 0;
}
@keyframes change
{
0%{opacity: 0; transform: scale(0);}
50%{opacity: 1;
transform: scale(1.2);
text-shadow: 2px 0px 0 red,-2px 0px 0 black,
0 1px 0 black , 0 -1px 0 red;}
100%{opacity: 0;transform: scale(0);}
}
p:nth-child(1){
animation-delay: 0s;
}
p:nth-child(2){
animation-delay: .4s;
}
p:nth-child(3){
animation-delay: .8s;
}
p:nth-child(4){
animation-delay: 1.2s;
}
p:nth-child(5){
animation-delay: 1.6s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.