javascript - 如何为背景图像上的文本剪切动画

标签 javascript html css css-animations

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

还有我的目标: enter image description here

最佳答案

一种可能性,使用 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>

关于javascript - 如何为背景图像上的文本剪切动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39646076/

相关文章:

html - CSS 布局问题(twitter bootstrap)

javascript - 切换 div 时,如何让用户位于该 div 的顶部而不是在中间滚动

jquery - 使用 jQuery 或 CSS 放置未知高度的动态 div

html - 如何将一个图像放在另一个图像之上

javascript - 使用ajax在ajax语句之外获取值

javascript - 打开后拒绝错误 `.catch`

javascript - Contenteditable div 文本被添加到 span 元素中而不是外部

悬停时的 CSS 会影响另一个容器中的元素( Bootstrap 卡)

css - 3 格 : one centered and the two others one in each side

javascript - 设置对象属性的状态