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

【问题标题】：How to animate a text cutout over a background-image如何在背景图像上为文本剪切设置动画
【发布时间】：2018-01-24 23:44:21
【问题描述】：

我正在尝试使用 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-->

还有我的目标：

【问题讨论】：

嗯，这不是故障排除。尽管您提供了有效的尝试，但恐怕您的要求太多。我会试一试，但没有承诺，因为这个问题可以结束。
您能否为您所询问的代码命名一个可靠/官方的来源？即便是这样的来源的一个例子，无论如何，如果这种代码不可用？

标签： javascript html css css-animations

【解决方案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>

【讨论】：

但我想要文本后面的框。实际上会有三层，一层是背景图像'.container'，第二层是白色背景的'.box'和透明的'.big'。这可能吗？
请注意，mix-blend-mode 在 IE\Edge 中不受支持。 caniuse.com/#feat=css-mixblendmode

【解决方案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”通过填充空间来实现“显示”效果。

【讨论】：

仅供参考，您可以通过使用 color 来避免 -webkit-text-fill-color。 background-clip-text 也有一个可以在 Firefox 中运行的无前缀版本。

【解决方案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>

【讨论】：