html 图像填充文本

Posted 2021-05-10

@keyframes filling {
  from{
    background-position: center 25%;
  }
  to {
    background-position: center 50%;
  }
}

.container-text {
  background-image:  url('https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg');
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  color:  #FFFFFF;
  padding-top: 20px;
  font-size: 170px;
  font-family: 'Bungee', cursive;
  animation: filling 3s ease forwards;
}

<div class="container-text">
    Nature
</div>