如何在背景图像上设置文本剪切的动画

Question

我试图使用CSS和/或JavaScript模仿下面显示的动画。我创建了开始步骤，但无法弄清楚如何为缩放设置动画部分。

＆＃13;

＆＃13;

    body {
      background-color: #222;
    }
    .container {
      background-image: url(test.jpg);
      height: 96vh;
      width: 100%;
    }
    .box {
      background-color: #fff;
      height: 98vh;
      width: 100%;
    }
    .big {
      font-size: 17vw;
      background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg) 33px 659px;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      padding-top: 24vh;
      margin-top: 0;
      text-align: center;
      animation: opac 2s infinite;
    }
@keyframes opac {
  0%, 100% {
    /*rest the move*/

  }
  50% {
  /*move some distance in y position*/
  }
}

＆＃13;

<div class="container">
  <div class="box">
    <h1 class="big">TRY THIS</h1>
  </div>
  <!--end of box-->
</div>
<!--end of conatiner-->

＆＃13;

＆＃13;

＆＃13;

我的 TARGET：

Answer 1

一个可能性，使用2个元素，一个用于图像，另一个用于文本，以及混合模式以实现透明度：

请注意，IE或Edge

不支持混合模式

＆＃13;

＆＃13;

body,
html {
  width: 100%;
  height: 100%;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(http://placekitten.com/1000/600);
  background-size: cover;
}
.box {
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background-color: white;
  overflow: hidden;
  mix-blend-mode: lighten;

}

.big {
  position: absolute;
  left: 20%;
  top: 30%;
  font-size: 10vw;
  color: black;
  animation: zoom 4s infinite;
}
@keyframes zoom {
  from {
    transform: scale(0.2, 0.2);
  }
  to {
    transform: scale(4, 4);
  }
}

＆＃13;

<div class="container">
  <div class="box">
    <div class="big">TRY THIS</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我使用-webkit-text-fill-color和-webkit-background-clip-text为您的原始代码提供了一个解决方案，并为动画添加了font-size和一个负text-indent。需要使用否定text-indent来保持文字＆＃34;居中＆＃34;因为元素内的文本总是想要碰到左边缘。

＆＃13;

＆＃13;

  * {
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  #container {
    height: 160px;
    overflow: hidden;
    position: absolute;
    width: 600px;
  }

  #image {
    animation: scale 3000ms linear infinite;
    background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg);
    bottom: 0;
    font: 96px "Arial";
    font-weight: bold;
    left: 0;
    line-height: 160px;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }

  @keyframes scale {
    0% {
      font-size: 66px;
      text-indent: 0;
    }
    16% {
      font-size: 132px;
      text-indent: 0;
    }
    80% {
      font-size: 330px;
      text-indent: -500px;
    }
    100% {
      font-size: 10000px;
      text-indent: -25300px;
    }
  }

＆＃13;

<div id="container">
  <div id="image">try this</div>
</div>

＆＃13;

＆＃13;

＆＃13;

基本上，我正在调整text-indent，以便随着字体大小增加中间＆＃34; T＆＃34;保持居中（虽然它真的不在中心）然后文字变得如此之大（10,000像素！），以及＃34; T＆＃34; ＆＃34;揭示＆＃34;填补空间的效果。

Answer 3

＆＃13;

＆＃13;

body {
  margin: 0;
}
.image {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url("https://www.viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg");
  background-size: cover;
  overflow: hidden;
}
.text-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  mix-blend-mode: lighten;
  animation: 2s scale cubic-bezier(0.88, 0, 1, 0.1) infinite;
}
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(-0.3em);
  font: bold 7vw "Arial", sans-serif;
  white-space: nowrap;
}
@keyframes scale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(500);
  }
}

＆＃13;

<div class="image">
  <div class="text-container">
    <div class="text">TRY THIS</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;