像bitly.com复制链接中的重影效果

Question

想知道哪种库可以制作这种文本重影动画？

由于

Answer 1

您是否尝试过打开网络检查员，亲眼看看bitly.com是如何做到的？通常最好的学习方式是模仿他人的工作。

你可以看到它很简单。当用户点击按钮时，会创建一个元素 - 其唯一目的是提供＆＃34;重影＆＃34;你描述的动画。然后它在动画完成时消失。

Answer 2

来自http://cssanimation.io/的“淡出顶部”效果似乎非常相似。您可以“绝对”将两个文本层放在彼此的顶部，然后仅在其中一个上运行动画以创建“重影”效果。这是cssanimation.io的原始CodePen：http://codepen.io/cssanimation/pen/YpPXjR

这是我建议的两个图层的分叉：http://codepen.io/anon/pen/YVNNGw/

<div class="container">
      <h1 class="layer1">cssanimation</h1>
      <h1 class="layer2 cssanimation fadeOutTop">cssanimation</h1>
</div>

和CSS：

body {overflow: hidden;}
.container { font-family: 'Ubuntu', sans-serif; position: relative; height: 300px; } /* center text styling */
h1, .link { font-size: 4.5em; letter-spacing: -4px; font-weight: 700; color: #7e2ea0; text-align: center; } /* h1 styling */
@media screen and (max-width: 488px) { h1 { font-size: 2.6em; letter-spacing: -2px; } } /* control h1 font size below 768px screen */

/* animation duration and fill mode */
.cssanimation {
  animation-duration: 1s;
  animation-fill-mode: both;
  display: inline-block;
}

/* fadeOutTop animation declaration & iteration counting */
.fadeOutTop { animation-name: fadeOutTop }

/* fadeOutTop animation keyframes */
@keyframes fadeOutTop {
    from { opacity: 1 }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}
.layer1 {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}
.layer2 {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
}