index.html
<body>
<h1 data-spolight = "melody!">melody</h1>
</body>
index.css
body {
background-color:#222;
display:flex;
justify-content: center;
align-items:center;
min-height: 100vh;
}
h1 {
color:#333;
font-family:Helvetica;
margin:0;
padding:0;
font-size:8rem;
letter-spacing: -0.3rem;
position:relative;
}
h1::after {
content:attr(data-spolight);
color:transparent;
position:absolute;
top:0;
left:0;
-webkit-clip-path: ellipse(100px 100px at 50% 50%);
clip-path:ellipse(100px 100px at 0% 50%);
animation:spotlight 5s infinite;
-webkit-animation:spotlight 5s infinite;
background-image: url(https://images.unsplash.com/photo-1573655349936-de6bed86f839?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGxpZ2h0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60);
background-size: 150%;
background-position: center center;
-webkit-background-clip:text;
background-clip: text;
}
@keyframes spotlight {
0% {
-webkit-clip-path: ellipse(100px 100px at 50% 50%);
clip-path:ellipse(100px 100px at 0% 50%)
}
50% {
-webkit-clip-path: ellipse(100px 100px at 50% 50%);
clip-path:ellipse(100px 100px at 100% 50%)
}
100% {
-webkit-clip-path: ellipse(100px 100px at 50% 50%);
clip-path:ellipse(100px 100px at 0% 50%)
}
}
</style>
