Question

我在一个页面上工作，当您向下滚动页面时，不同的元素会动画显示在视图中。你可以在这里看到一个例子：

我的一面有一张图片，另一面有一些文字。到目前为止，这一切都运作良好。您会注意到我在每张图片上都有一个点，其位置会在每个图片上发生变化。我需要从该点出现一条线并将其链接到文本。您可以在CodePen上看到粗略的红色示例。</ p>

我想过只是淡化图像/ div，但我不认为它看起来很好。因此，将线从一侧动画到另一侧是最好的，但我不确定是否可能由于转弯而可能？确保点，线和文本块排成一行也会很痛苦。好消息是线条将隐藏在手机/平板电脑上，因此绝对定位和固定的高度/宽度都可以。

如果我可以在0px宽的范围内为容器的宽度设置动画，这可以使线条的效果“增长”。但它可能会使图像偏斜一点。当线路垂直运行时，它最终可能看起来很奇怪？下面的示例CSS ...

.lines {
    height: 126px;
    overflow: hidden;
    position: absolute;
    bottom: 30%;
    left: 30%;
    transition: all .5s 1s;
    width: 0;

    .in-view & {
        width: 311px;
    }
}

.lines__inner {
    background: url(https://image.ibb.co/kXzOvR/test_line.png) no-repeat 0 0;
    background-size: contain;
    display: block;
    height: 126px;
    width: 311px;
}

每个4行图形都不同，但我可以使用每个ID来指定正确的图像+尺寸。虽然它们不同，但它们都是由相同的形状组成，只是不同长度的线条。因此，例如，每个图形将有一条来自点的线，在进入2个叉之前向上和向上移动。

有人对此有什么好的解决方案吗？

在2点之间设置之字形线的动画

0 个答案: