Question

我对CSS非常陌生，并为一个朋友网站制作了一些动画。尽管我似乎遇到了一个问题。

以下动画是文本字段上的弹跳效果：

.text {
    animation: text-pop-up-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
}

@keyframes text-pop-up-top {
  0% {
    transform: translateY(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateY(-50px);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

但是该文本弹跳得太高，与其他文本重叠。是否可以设定高度，使其仅上升到设定高度的一半？如果这不是一个简单的解决方案，我仍然无法解决，我深表歉意。我非常感谢您的帮助。

Answer 1

您要调整的行是此行：

transform: translateY(-50px);

尝试将其调整为：

transform: translateY(-25px);

更新

您可能还需要调整text-shadow的最后一部分，以减小阴影的垂直距离，以与降低的translateY值保持一致。

更改此：

text-shadow: … 0 50px 30px rgba(0, 0, 0, 0.3);
              /* ^^ */

对此：

text-shadow: … 0 25px 30px rgba(0, 0, 0, 0.3);
              /* ^^ */

jsFiddle

是否可以在CSS文本动画上设置跳动高度？

1 个答案: