在使用CSS Motion Path时 ，总是使我感到困惑，即路径本身无法缩放。 所创建的路径大小本质上是固定大小（以像素为单位）。 这意味着使用Motion Path进行响应式设计有些棘手，并且需要一些解决方法。
缩放路径
令人高兴的是，CodePen的狂热爱好者（和出色的动画师） Jhey Tompkins提出了一种具有想象力的方法来缩放路径值，并绘制了库D3的图表-并在CSS Tricks上进行了介绍 。 如果您不希望路径上的元素自行缩放，这是一种缩放路径的聪明方法。 如果我们不想保留宽高比，它甚至可以缩放任一轴上的路径。 Jhey甚至在我自己的CodePen实验之一中放了一个测试它的演示：
转换方法
正如Jhey的演示所示，我们还需要做一些工作来缩放文本，以获得对我们有用的结果。 有时，在调整视口大小时，不仅缩放路径，还缩放缩放动画的元素可能更有意义。 我测试了另一种方法：使用“ 调整大小观察器”从父容器计算变换scale值。 这将输出一个自定义属性值，然后将其用于CSS转换：
这也与文档流中的其他内容有关，我不确定是否会。
这两种方法都将受益于更多的实验，并且可能在不同情况下有用。 我期待与他们合作更多，因为能够缩放路径将是在生产中使用Motion Path的一大动力。
扫一扫
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
