html, body {
background: linear-gradient(to bottom, #000428, #004e92);
}
p {
color: white;
text-align: center;
}
h1 {
background: url();
-webkit-background-clip: text;
background-size: contain;
width: 100%;
text-align: center;
color: transparent;
font-weight: 900;
}
h1::before {
content: attr(data-heading);
position: absolute;
left: 0;
top: 0;
width: 100%;
background: linear-gradient(45deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
-webkit-background-clip: text;
color: transparent;
mix-blend-mode: screen;
-webkit-animation: shine 1s infinite;
animation: shine 1s infinite;
background-size: 200%;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -2px 2px 10px rgba(0, 0, 0, 0.2), -2px -2px 10px rgba(0, 0, 0, 0.2);
}
@-webkit-keyframes shine {
0% {
background-position: -100%;
}
100% {
background-position: 100%;
}
}
@keyframes shine {
0% {
background-position: -100%;
}
100% {
background-position: 100%;
}
}
/* Not needed for demo */
@font-face {
font-family: "frozen";
src: url("");
}
html, body {
height: 100%;
}
h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
margin: 0;
font-family: "frozen", serif;
font-weight: 700;
}