小编Sha*_* Kv的帖子

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

我正在尝试使用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*/
  }
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="box">
    <h1 class="big">TRY THIS</h1>
  </div>
  <!--end of box-->
</div>
<!--end …
Run Code Online (Sandbox Code Playgroud)

html javascript css css3 css-animations

12
推荐指数
3
解决办法
797
查看次数

使用CSS或CSS3 animate线性擦除文本效果

如何使用CSS和JavaScript显示带有"线性擦除"效果的文本.怎么做?

<p>Text linear wipe </p>
Run Code Online (Sandbox Code Playgroud)

javascript css css3

-1
推荐指数
1
解决办法
3066
查看次数

标签 统计

css ×2

css3 ×2

javascript ×2

css-animations ×1

html ×1