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

Question

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

    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*/
  }
}

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

而我的目标:

Answer 1

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

请注意,IE或Edge不支持混合模式

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);
  }
}

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

Answer 2

我想出了基于使用原密码的解决方案-webkit-text-fill-color,并-webkit-background-clip-text与加font-size和负text-indent的动画.text-indent需要使用负数来保持文本在元素中"居中",因为元素内的文本总是想要碰到左边缘.

  * {
    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;
    }
  }

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

基本上,我正在调整,text-indent以便随着字体大小增加,中间的"T"保持居中(虽然它实际上不在中心)然后文本变得如此之大(10,000像素!),"T"表示通过填充空间"揭示"效果.

Answer 3

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);
  }
}

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