<style>
@import url('https://fonts.googleapis.com/css?family=Teko&display=swap');
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Teko', sans-serif;
background: #000;
}
a {
text-decoration: none;
color: inherit;
font-size: 4vmin;
}
p {
position: relative;
text-align: center;
font-size: 8vmin;
text-transform: uppercase;
letter-spacing: 5px;
line-height: .8;
background: linear-gradient(90deg, #000, #fff, #000);
background-size: 80% 100%;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 5s linear infinite;
}
@keyframes shine {
0% {
background-position-x: -500%;
}
100% {
background-position-x: 500%;
}
}
</style>
<p>Welcome to my codepen profile:<br><a href="https://codepen.io/cssparadise">codepen.io/cssparadise</a></p>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter