Shining Text (using mask-image)

HTML
<h1> <a href="#" class="effect-shine">shine</a> </h1>
CSS
html, body { background-color: #222; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } h1 a { color: #fff; font-size: 10vw; text-decoration: none; text-transform: uppercase; letter-spacing: 6px; display: inline-block; position: relative; font-family: 'Merriweather', serif; -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%); -webkit-mask-size: 200%; animation: shine 2s linear infinite; } @keyframes shine { from { -webkit-mask-position: 150%; } to { -webkit-mask-position: -50%; } }
JAVASCRIPT
Expand for more options Login