<div class="container">
<div class="text">
<b>100 s<span>u</span>bs</b>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Pacifico);
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2242&q=80");
background-size: cover;
background-position: center center;
}
.text {
b {
font: 400 25vh "Pacifico";
letter-spacing: -5px;
color: #fee;
text-shadow: 0 0px 10px, 0 0 1em #560a86, 0 0 0.5em #560a86,
0 0 0.1em #560a86, 0 10px 3px #333;
span {
animation: flicker linear infinite 2s;
}
}
}
@keyframes flicker {
75% {
color: inherit;
text-shadow: inherit;
}
76% {
color: #222;
}
77% {
color: inherit;
text-shadow: none;
}
78% {
color: inherit;
text-shadow: inherit;
}
79% {
color: #222;
text-shadow: none;
}
80% {
color: inherit;
text-shadow: inherit;
}
90% {
color: #222;
text-shadow: none;
}
90.5% {
color: inherit;
text-shadow: inherit;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.