テキストに背景画像を使ったローディング
Result
See the Pen filling text with image as background by kachibito (@kachibito) on CodePen.
css
a {/*背景はbackground-clipで*/
font-size: 120px;
background: url("https://picsum.photos/900/600") no-repeat;
-webkit-background-clip: text;
color: rgba(255, 255, 255, 0);
text-shadow: 0 0 rgba(0, 0, 0, 0.06);
background-size: 100% 0;
animation: fill 2s infinite;
}
@keyframes fill {/*ローディングのアニメーション*/
100% {
background-size: 100% 100%;
}
html
<a>LOADING</a>
can i use
via
filling text with image as background