offset-path 缩放 响应式 CSS 运动路径的不同方法 Chris Coyier 于 2020年4月24日 DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度! 作为对 Jhey 最近关于 响应式运动路径 的文章的后续,Michelle Barker 指出,另一种方法可能是简单地对整个元素进行 transform: scale()。 这样做的权衡是,您同时缩放路径和路径上的元素;Jhey 的方法只使路径灵活,而元素保持相同大小。 我认为计算缩放比例是一个非常酷的技巧,我们 之前也介绍过。 直接链接 →
您还可以使用 transform 方法来视觉上更改路径的大小,但不会更改其上的元素。您只需要反转子元素上的缩放即可。
因此,如果父元素为
scale( --var(x) )
,则可以在子元素上使用scale( calc( 1 / --var(x) ) )
将其转换回另一种方式。您可能需要考虑由此产生的间距问题,但如果您路径上只有一个项目,则问题可能不会那么严重。