开始使用CSS多边形

长期以来,形成网站的矩形块和圆形的基本结构一直困扰着设计师和创意开发者。因此,当CSS剪辑路径多边形在WebKit浏览器中出现时,我立即兴奋地燃烧起来。

该属性主要用于包装文本和蒙版内容,还为设计人员提供了在纯CSS中创建更多令人兴奋的形状的机会,而无需画布或SVG。我觉得它可以改变我的设计和开发方式,结果不会花费很长时间才能产生影响。

Clip-path的主要目的是屏蔽一个区域(不仅仅是图像而是实际内容),但在本教程中,我将专门研究可以使用polygon属性做什么。我将带您了解Sass for-loops如何用于创建全面的过渡效果,并将CSS多边形集合变为现实。

创建一组div

 We’re creating a fan effect, in which each of the seven triangular polygons animates out from a central point

我们正在创建一个扇形效果,其中七个三角形多边形中的每一个都从中心点动画出来

我们的目标是从一个中心点扇出一组三角形的效果(检查出来)本教程的Codepen)。首先,您需要根据需要为多个多边形创建div(这里我使用的是七个),并将它们放在彼此的顶部。

.polygon-wrap {div {position:absolute;宽度:500px;身高:275px;顶部:0;左:0; }}

创建多边形的第一个状态

我们将转换多边形,以便风扇从中间向外扩展。为此,我们首先要定义多边形的原始状态。我们将添加一个背景颜色,它会自动被遮盖在您创建的形状中:

.polygon-wrap {div {-webkit-clip-path:polygon(50%95%,50%95%,50%95%); background-color:#46008C; }}

动画触发器

您需要一个移动触发器才能进行转换。在这里,我们将简单地在包装元素上放置悬停状态。

.polygon-wrap:悬停{}

创建多边形

相当令人愉快的是,CSS多边形只使用一行代码创建。多边形可以采用您喜欢的任何形式:它们不受任何数量的点或边的约束。但是,如果您正在转换像我们这样的形状,请记住使用相同数量的点,并使用数组中的相同点来为以下每个点设置动画:

..polygon-wrap:hover {div:nth-child(1){ -  webkit-clip-path:polygon(19%42%,26%32%,50%95%); }}

该多边形呈三角形,形成七部分风扇的左侧。百分比值基于父div的大小与X和Y坐标对齐。

通过for循环过渡

在创建多边形的第二个状态后,可以使用Sass For循环创建一组全面的过渡。这些导致每个div的动画效果比其前一个稍慢,从而产生“混合”感觉。这也提升了性能,因为处理器正在做一件又一件事,而不是一次做七件事。

.polygon-wrap {div {transition:0.2s; @for $ i从1到7 {&:nth-child(#{$ i}){$ tdelay :((($ i * 0.1))+ 0.2s); $ tduration:($ i * 0.05 + 0.25s);过渡延迟($ TDELAY);过渡持续时间($ tduration); }}}}

这段代码实际上为每个div创建了时序差异。初始缓冲区是转换“基础”(此处为0.2秒)。接下来,有一个延迟值(0.1秒)。该值乘以div的顺序号(从1到7)以给出转换延迟。

在Pieces中

In Pieces

在Pieces中

在个人项目中,在Pieces中,我使用这个相同的多边形属性来创建30种不同的濒危动物的图像,每个动物由30个三角形“块”组成。我使用基本CSS过渡从动物到动物在屏幕上以一种清晰的动作进行混合。这些动物似乎互相转化;使用本教程中讨论的转换延迟创建的效果。

在In Pieces中,运动是按顺序创建的。 div元素被赋予子索引整数,然后乘以某个值来给出延迟时间。我使用了30个div元素来包含30个单独的多边形。然后我引入了0.1秒的转换延迟,因此第一个多边形在一秒钟后动画(0.1 x 10),第三个多边形在三秒(0.1 x 30)之后转换。

微光效果

这些延迟也用于在动物身上创造一个“微光”,每隔几秒就可以看到。延迟序列允许在所有元素上进行简单的不透明度切换,从而产生类似于光对玻璃的影响的清晰闪光。这是一个非常具体的例子,这种延迟的使用不仅限于CSS多边形。

这些延迟特别实现的是运动的流动性因素,创造了更自然的动画效果。这是一种微妙但非常有益的触觉。如果没有这种混合,一组变成其他东西的多边形可能会非常刺眼。它还可以提高性能,因为同时移动的次数更少。

结论

你有它!这是用多边形生成有序运动的好方法。使用CSS多边形有很多令人兴奋的创造性可能性,所以请四处玩,看看你可以用这些形状做些什么。

布莱恩詹姆斯

Bryan James是一位以创作而闻名的自由设计师和创意编码员在Pieces中。本文最初发表于第272期网络杂志

喜欢这个?阅读这些!



翻译字数超限