通过调整窗口来滑动文本

Question

前几天我看到一个网页，当我调整窗口大小时，文本（padding-left: 5%）滑动到另一个位置。通常位置改变为“硬”（意味着当我使窗口宽100px时，位置距离左侧5px），但它确实滑到了这个新位置。

首先我认为它将是一个js库，所以我尝试停用javascript，但即使在此之后它也有效，所以我认为它必须是基于CSS的？有人提示我怎样才能做到这一点？

Answer 1

为了使用纯css执行此操作，您需要使用媒体查询和css转换。

以下是一个示例：jsfiddle（尝试快速调整结果窗格的大小）

关键部分：

.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