Question

所以我正在制作这个动画，文字从线的底部向上滑动。可以在此处预览代码的简化版本：

HTML：

<div>
    <span>Harley</span>
</div>

CSS：

div {
    overflow: hidden;
    margin-bottom: 1rem;

    > span {
        display: block;
        font-size: 5rem;
        font-weight: bold;
        line-height: 1;
        transform: translateY(100%);
        transition: all .3s;

        &.active {
            transform: translateY(0);
        }
    }
}

一切正常，除了文本的几个底部像素被切断。我确实理解这种情况是因为线高度降低（所以请不要将其标记为其他类似问题的副本），但我确实需要保持线高。

有没有办法创建这种类型的动画，避免文本被切断并保持缩小的行高？

Answer 1

您可以使用span的相对定位来偏移字体，并调整CSS属性top:-9px以获得所需的偏移量。

从以下答案获得的想法。

SO Answer

<强> CSS：

div {
    overflow: hidden;
    margin-bottom: 1rem;

    > span {
        display: block;
        font-size: 5rem;
        top: -9px;
        position: relative;
        font-weight: bold;
        line-height: 1;
        transform: translateY(100%);
        transition: all .3s;

        &.active {
            transform: translateY(0);
        }
    }
}

Codepen Demo

溢出隐藏文本被切断

1 个答案: