SVG 九宫格切图

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

Paul Lewis 制作了一个 3D 卡片翻转动画。这本身很简单,但还需要一个阴影元素。

阴影可能需要四处移动或淡出,因此我们需要一个可以使用变换和不透明度进行动画处理的解决方案,因为它们可以传递给 GPU。它需要与它所投射阴影的元素分离,因为我们可能希望淡出和移动它而不会影响其他元素。

他尝试了 box-shadowfilter: blur(),但两者性能都不够好。

他尝试了一个带有模糊滤镜的 SVG 元素,但 SVG 本身无法进行九宫格缩放(这对于防止角部缩放不自然至关重要)。

最终的解决方案是使用 SVG 图像,但通过 border-image 应用于元素,这本质上就是九宫格缩放。

直接链接 →