テキストに背景画像を使ったローディング

Ads

2017.08.07

Result

See the Pen <a href='https://codepen.io/kachibito/pen/GyoZxO/'>filling text with image as background</a> by kachibito (<a href='https://codepen.io/kachibito'>@kachibito</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

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

Result

css

html

can i use

via

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code