css 通过调整窗口大小来滑动文本

Question

几天前，我看到一个网站，当我调整窗口大小时，文本 (padding-left: 5%) 滑到了另一个位置。通常位置会“硬”改变(意味着当我将窗口加宽 100px 时，位置离左边多 5px)，但它确实滑到了这个新位置。

首先我认为它会是一个 js 库，所以我尝试停用 javascript，但即使在这之后它仍然有效，所以我认为它一定是基于 css 的？有人提示我该怎么做吗？

Answer 1

为了使用纯 css 来做到这一点，您需要使用媒体查询和 css 转换。

这是一个例子:jsfiddle (尝试快速调整结果 Pane 的大小)

关键部分:

.gliding-text {
    padding-left: 0px;
    transition-duration: 1s;
}
@media (min-width: 200px) {
    .gliding-text {
        padding-left: 10px;
     }
}
@media (min-width: 500px) {
    .gliding-text {
        padding-left: 100px;
    }
}

媒体查询充当应用转换时的断点。在我制作的示例中，当窗口为 200px-499px 时更改 padding-left 属性，然后当窗口为 500px+ 时再次更改。这会触发 padding-left 属性发生变化，并应用 css 过渡。这是您描述的技术的一个简单示例。

结帐 media queries和 css transitions