1. 首页
  2. css

CSS剪,剪,再剪!

有这么多的事情,你可以做剪辑路径。我已经探索了很长一段时间,并且为它们提出了不同的技术和用例——我想和你们分享我的发现!我希望这将激发新的想法有趣的事情,你可以做的CSSclip-path属性。希望你能把它们用在你的项目上,或者玩转它们,从中获得乐趣。

在我们开始之前,值得一提的是,这是我在这里关于剪辑路径的CSS技巧的第三篇文章。您可能想了解一下这些背景知识:

  • 使用CSS Clip Path创建交互效果
  • 使用CSS Clip Path创建交互效果,第二部分
    • 本文充满了新的想法!

      想法1:双剪辑

      一个巧妙的技巧是使用剪辑路径多次剪切内容。这听起来很明显,但我还没有见过很多人使用这个概念。

      例如,让我们看一个扩展菜单:

      剪裁只能应用于DOM节点一次。一个节点不能有同一个CSS规则的多个活动实例,这意味着每个实例一个clip-path。但是,对于可以组合剪裁节点的次数没有上限。例如,我们可以把一个剪接的<div>放在另一个剪接的<div>里,以此类推。在DOM节点的祖先中,我们可以根据需要应用任意多个单独的剪切。

      这正是我在上面的演示中所做的。我让一个裁剪节点填充另一个裁剪节点。父对象充当边界,子对象在放大时填充边界。这会在出现圆形菜单时产生一种不寻常的效果。把它看作是overflow: hidden的一种高级方法。

      当然,你可以说SVG更适合这个目的。与剪切路径相比,SVG能够做更多的工作。除此之外,SVG还提供了平滑的缩放。如果剪裁完全支持的Bézier曲线,对话就会不同。在撰写本文时,情况并非如此。不管怎样,剪切路径非常方便。一个节点,一个CSS规则,你就可以走了。就上面的演示而言,剪辑路径做得很好,因此是一个可行的选择。

      我放了一个简短的视频,解释了菜单的内部工作原理:

      想法2:缩放剪辑路径

      另一个(不太明显的)技巧是使用剪辑路径进行缩放。我们实际上可以使用CSS转换来动画剪辑路径!这个过渡体系的建立方式令人吃惊。在我看来,它的加入是近年来互联网取得的最大飞跃之一。它支持一系列不同值之间的转换。剪辑路径是我们可以设置动画的可接受值之一。一般来说,动画意味着两个极端之间的插值。对于剪裁,这转化为两个完整的不同路径之间的插值。在这里,网络精致的动画系统展示了它的力量。它不仅适用于单个值-在设置一组值的动画时也适用。

      具体地设置剪辑路径的动画时,每个坐标分别进行插值。这很重要。它使剪辑路径动画看起来连贯和平滑。

      让我们看看演示。单击图像以重新启动效果:

      我在这个演示中使用了clip-path转换。它是用来从一个小区域的剪辑路径放大到另一个大区域的。剪辑路径的最小版本比分辨率小得多——换句话说,应用时眼睛是看不见的。另一个极端略大于视口。在这个缩放级别,没有可见的剪切,因为所有的剪切都发生在可见区域之外。在这两个不同的剪辑路径之间设置动画会产生有趣的效果。剪辑后的形状在放大时似乎会显示其背后的内容。

      您可能已经注意到,演示使用了不同的形状。在这种情况下,我使用的是流行鞋品牌的标识。这让您了解在更真实的场景中使用时效果会是什么样子。

      同样,这里有一个视频详细介绍了技术方面的内容:

      想法3:剪辑覆盖

      另一个想法是使用剪辑路径来创建高亮效果。例如,假设我们想使用剪辑路径在菜单中创建活动状态。

      上面的剪辑路径在设置动画时会在不同的菜单选项之间延伸。此外,我们还使用了一个有趣的形状来让用户界面显得更加突出。

      这个演示使用了一个相同内容的修改副本,其中复制副本位于现有内容之上。它被放置在与菜单完全相同的位置,并作为活动状态。本质上,它看起来像菜单的任何其他常规活动状态。不同之处在于它是用剪切路径r创建的

      CSS剪,剪,再剪! 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%89%aa%ef%bc%8c%e5%89%aa%ef%bc%8c%e5%86%8d%e5%89%aa%ef%bc%81/

      发表评论

      您的电子邮箱地址不会被公开。