テキストの背景を画像にしてアニメーションさせる
Result
css
h1{
color: #F2F5FE;
text-align: center;
font-size: 200px;
line-height: 1;
font-family: 'Rajdhani', sans-serif;
}
h1 a{
display:block;
background: -webkit-linear-gradient(transparent, transparent), url(https://picsum.photos/1800/1400?random) repeat;
background-size: auto 500px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: background 15s infinite linear;
}
@keyframes background {
from {
background-position: 0 0%;
}
to {
background-position: -500px 0px;
}
}
|
html
<h1>
<a href="https://picsum.photos/">Lorem<br>Picsum</a>
</h1>
|
via
Be happy!
