<!DOCTYPE html>
<html>
<body>
<pre><h1>Example Text</h1></pre>
</body>
</html>
html {background: black;}
h1 {
animation-name: TextShadowing;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: unset;
font-family: “Open Sans”, sans-serif;
font-size: 100px;
text-align: center;
color: #8B488F;
}
@keyframes TextShadowing {
0% { text-shadow: 5px -5px 5px #000, 10px -10px 10px #E80CD8, 0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
14% { text-shadow: -5px -5px 5px #000, -10px -10px 10px #E80CD8, 0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
28% { text-shadow: -5px 0px 5px #000, -10px 0px 10px #E80CD8, 0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
42% { text-shadow: -5px 5px 5px #000, -10px 10px 10px #E80CD8, 0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
56% { text-shadow: 0px 5px 5px #000, 0px 10px 10px #E80CD8, 0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
70% { text-shadow: 5px 5px 5px #000, 10px 10px 10px #E80CD8, 0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
84% { text-shadow: 5px 0px 5px #000, 10px 0px 10px #E80CD8, 0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
100% { text-shadow: 5px -5px 5px #000, 10px -10px 10px #E80CD8, 0px 0px 30px #780CE8, 0px 0px 40px #420DFF ; }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.