无法使用此滑动效果获得更大的字体

Question

我发现了一个 CSS 从这个代码笔中滑过单词的动画：code

效果很好！但是，当我尝试将字体大小增加到 70 时，单词开始重叠。我玩过它但不能让它很好地工作。我如何让这段代码使用更大的字体？这就是我现在拥有的：

.wordCarousel {
    font-size: 36px;
    font-weight: 100;
    color: #eee;
    div {
        overflow: hidden;
        position: relative;
        float: right;
        height: 65px;
        padding-top: 10px;
        margin-top: -10px;
        li {
            font-family: Serif;
            color: #eee;
            font-weight: 700;
            padding: 0 10px;
            height: 45px;
            margin-bottom: 45px;
            display: block;
        }
    }
}

@keyframes flip4 {
    0% {
        margin-top: -360px;
    }
    5% {
        margin-top: -270px;
    }
    25% {
        margin-top: -270px;
    }
    30% {
        margin-top: -180px;
    }
    50% {
        margin-top: -180px;
    }
    55% {
        margin-top: -90px;
    }
    75% {
        margin-top: -90px;
    }
    80% {
        margin-top: 0px;
    }
    99.99% {
        margin-top: 0px;
    }
    100% {
        margin-top: -270px;
    }
}

html类似这样：

<h4 class="wordCarousel">
    <span>Word swipe animation: </span>
    <div>
        <!-- Use classes 2,3, or 4 to match the number of words -->
        <ul class="flip4">
            <li>Oh My!</li>
            <li>Swoosh</li>
            <li>Cool</li>
            <li>Squirrel</li>
        </ul>
    </div>
</h4>

Answer 1

它在我的屏幕上确实运行良好。但是 170px 使单词重叠在我的身上。我敢打赌这个问题取决于屏幕尺寸。有些屏幕在 70 像素的字体下效果很好，有些则不然。

您可以尝试使用相对长度单位而不是 px。在这里查看更多： https://www.w3schools.com/cssref/css_units.asp

您可以查看 vw。转到此处并抓住中间的条，将代码与结果分开，然后来回移动它以查看“Hello”字体上的 vw 效果： https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

Answer 2

嗯，您的 CSS 动画中的像素值都是 90 像素步长（-360 像素、-270、-180、-90、0）。所以只需在其中使用更大的步长，例如 120px:

@keyframes flip4 {
    0% {
        margin-top: -480px;
    }
    5% {
        margin-top: -360px;
    }
    25% {
        margin-top: -360px;
    }
    30% {
        margin-top: -240px;
    }
    50% {
        margin-top: -240px;
    }
    55% {
        margin-top: -120px;
    }
    75% {
        margin-top: -120px;
    }
    80% {
        margin-top: 0px;
    }
    99.99% {
        margin-top: 0px;
    }
    100% {
        margin-top: -480px;
    }
}

如果这还不够，请尝试 150 像素步长（-600、-450、-300、-150、0、-600），或者通过尝试哪个步长值最适合您的情况来找出。

无法使用此滑动效果获得更大的字体

Cant get larger font working with this swipe effect

css

css-animations