Effects模块

在这篇文章中,我们将讨论所有元素上可用的效果模块以及如何使用它(它非常棒)!

  1. 开始
  2. 基础:介绍
  3. 基础:过渡
  4. 交互
  5. 滚动
  6. 面具:介绍
  7. 面具:线性
  8. 面具:径向
  9. 面具:形象
  10. 面具:自定义
  11. 蒙版:重复,大小和位置
  12. 专长:混合混合模式
  13. 特长:背景滤镜
  14. 链接子交互
  15. 把它们放在一起
  16. 视频

基石中的所有元素都包含一个影响模块,它允许用户利用CSS属性不透明度过滤器,变换(以及其他一些好东西)。此外,这些属性可以在交互和滚动事件期间进行转换。这个功能强大的新控件组为设计人员和开发人员在构建中提供了一个全新的工具集。

开始

你可以将Effects模块定位为当前正在检查的任何元素的顶级控制组,如下所示:

影响

单击该顶级控件组将显示以下控件集:

影响

从这里你将看到效果模块中的五个主要控制组:基地,相互作用,滚动,面具,而且专业。Base组允许您设置静态在你的元素上的效果,作为一个基础,要么根本不会改变,要么可能作为另一个互动或滚动效果的起点。交互、滚动和蒙版都是可选组,可以通过标题旁边的切换来启用。最后,专业控制组包含额外的静态控制,这些静态控制更具实验性,应该在一定程度上谨慎使用(稍后将详细介绍)。

基础:介绍

让我们从基础控制开始:

影响

如前所述,我们在Effects模块中使用的三个主要CSS属性是不透明度过滤器,变换.如果你不熟悉这些属性,下面是每个属性的简要描述:

  • 不透明度 - - - - - -允许您在元素上指定变量透明度。
  • 过滤器 - - - - - -允许使用视觉效果,如模糊,灰度,色调旋转,等等。
  • 变换 - - - - - -改变元素的外观而不改变元素的物理位置。可以用来移动、倾斜和旋转元素。

不透明度控件是相对简单的,所以让我们跳转到过滤器。点击该控件将显示以下弹出框:

影响

Effects模块的优点是,它更复杂的方面将具有一个引导界面来帮助您,即使您不熟悉特定的CSS属性。从上面的屏幕截图中,您可以看到,如果您愿意,您可以直接进入并开始在输入中输入属性值,或者您可以单击+按钮,将“图层”添加到此属性,并查看引导界面:

影响

在上面的截图中,我们选择了模糊()函数为我们的Filter控件,它为您提供了一个滑块,您可以使用它来调整值。默认情况下,所有这些都是为您组合的,并输出到下面的输入。现在,假设你想要添加第二个过滤器:

影响

这个图层我们选择了hue-rotate ()函数,它像以前一样具有相关的滑块。请注意,由于该层是列表中的第二个层,因此它将作为下面输入中的第二个值输出。这是一个需要记住的非常重要的信息:过滤器- - - - - -和转换- - - - - -线性在他们的输出中。这实际上意味着订单你把它们放在事物中,在某些情况下会得到不同的结果。

如果你想移动hue-rotate ()函数到输出中的第一个位置,你可以将它复制并粘贴到下面的输入中,但更简单的方法是在上面的列表中抓取图层并将其拖动到第一个位置:

影响

一旦它被删除,您将注意到hue-rotate ()函数已被移动到列表上的第一个插槽以及下面的输入。这可以让你快速实验不同的顺序,看看它是如何影响你的效果的整体输出的:

影响

现在我们对Filter控件的引导过程有了一些熟悉,让我们跳转到Transform控件:

影响

您将注意到一个类似于上面过滤器控件的接口。就像在那个上下文中一样,单击+按钮将显示Transform控件的引导设置:

影响

在这个界面中,您将能够进行实验移动(转换)、倾斜和旋转元素,以及这些转换的顺序。

基础:过渡

基本控件组中的最后一个控件是过渡控制。点击该选择器将显示以下弹出框:

影响

您可以使用这些控件来设置一般transition-duration而且transition-timing-function你的元素。这些值不仅应用于元素的Effects过渡,还应用于元素的颜色、阴影、图形、粒子等等。这些值用于元素的基本样式和交互样式之间的转换。

所有元素对于这两个设置都有一个默认值。对于它们中的绝大多数,默认的持续时间是300毫秒默认的Easing为材料标准。如果不更改这些值,则不会输出任何动态CSS,因为它们是由主题的静态样式表处理的,这将使生成的样式尽可能简洁。

交互

接下来,让我们转向交互组,其特点是一组几乎相同的控件。这里的主要区别是类型选择以及过渡控制:

影响

这允许您选择使用变换或者是预先烘焙好的动画当与元素交互时。有几件事要记住你所选择的(以及你如何设置你的基本控件):

  • 变换 - - - - - -选择此选项将允许您创建一个添加剂构建在Base控件组中设置的任何转换之上的转换。例如,假设你设置了一个斜()在你的基础组中,在悬停时,你希望它保持这个斜()但也翻译()上一些,你可以使用这个控件来做到这一点,两者之间的过渡将是平滑的。
  • 动画 - - - - - -特效模块中可用的动画是基于animate.css.因为这些动画中的许多都是使用它们自己的转换构建的,所以通常不能将它们与Base转换结合使用。实际上,这意味着如果您想在交互(或滚动)中使用动画,建议您将基本Transform控件保留为空白。但是,您仍然可以使用基础/交互不透明度而且过滤器与这些动画相结合。

在选择动画,Transform控件将被一个下拉菜单所取代,允许你选择想要的效果:

影响

此外,您将注意到an动画过渡控件也会出现。方法的计时动画只你的元素。这可以与基本控件组中的过渡控件叠加,这意味着你可以在该控件上设置一个值来管理颜色、不透明度和过滤器之间的过渡,但随后你的交互动画有一个完全不同的持续时间……有很多可供探索的选项!

滚动

现在是滚动对照组:

影响

这个控制组可能看起来有更多的变化,但你会注意到我们有很多和之前一样的重复控制。这里的主要区别是每个CSS效果都有两个变体- - - - - -一个入口和一个退出风格。的入口样式是元素进入视图时使用的样式退出样式在元素离开视口时触发。

例如,如果你想创建一个简单的淡入过渡,当你滚动到它时,元素从侧面翻译,你可以这样做:

  • 退出 - - - - - -不透明度设置为0而且变换设置为翻译(50%,0)
  • 入口 - - - - - -不透明度设置为1而且变换设置为翻译(0,0)

这将把您的元素向右推一点,并使其淡出,然后当您滚动到它时,它将转换回原始位置并淡出视图。这是1非常简单的使用滚动控件可以做什么的示例。一旦您开始将其与过滤器配对并更改偏移量和行为...选择几乎是无限的。

或者,就像在交互控制组中一样,您可以进行选择动画作为类型和使用预构建的动画,这是伟大的,如果你不需要那么多的微调控制,只是想让一些东西启动和运行:

影响

与交互对照组一样,如果使用动画选项,建议不要使用任何Base或Interaction Transform控件,以避免潜在的样式冲突。

在你有你的效果设置,你会想要确保你的行为已按您希望的方式设置。可用的选项如下:

  • 一次 - - - - - -元素将实例化样式和发射一次,一旦它进入视野,结束风格。
  • 重置 - - - - - -元素将实例化风格和过渡到滚动时的样式下来到它,它将保持该状态,直到您回滚以上它将重置回风格。每次你向下滚动到它时,它都会重新触发。
  • 输入输出 - - - - - -元素将实例化风格和过渡到样式,然后转换回当它再次离开视口时样式。每次进入和离开时,它都会在视口的顶部和底部重新触发。

抵消控件可以使用px单位与值基于视口高度。例如,如果将Top和Bottom值设置为10%每一个,你的元素样式将被触发时10%分别远离视口的顶部和底部边缘。或者,如果你利用了50 px每种样式都将在何时触发50 px分别远离视口的顶部和底部边缘。

最后,过渡用于设置滚动效果的计时。这里的主要区别是延迟控件,它可以允许您错开元素,因为它们进入和退出滚动效果。

面具:介绍

在我们不断致力于制造Photoshop-in-the-browser我们来谈谈现实掩蔽。四个不同的屏蔽模式:

  • 线性:允许您应用简单线性梯度()掩码穿过X Y 元素的。
  • 径向:应用一个圆形椭圆蒙版放在你的内容上,同时也可以让你利用径向渐变()CSS在这种情况下以一些独特的方式发挥作用。
  • 图片:让你有机会使用任何透明的. png作为内容顶部的蒙版,使用不透明的用作窗口为了让内容被看穿alpha透明度屏蔽内容的区域。
  • 自定义:可用于写入多个掩码图像,以及混合和匹配类型,如果需要。例如,你可以混合多种渐变类型和图像来创建复杂的掩蔽层。

下面我们将详细讨论每种模式。的重复,的大小,而且位置每种模式上的控件将在各自的部分中讨论,因为它们在决定如何输出掩码方面发挥着重要作用。

面具:线性

线性蒙版应用简单的线性梯度()掩码穿过X Y 元素的。

影响

首先你要选择哪个工作跨越除了应用程序方法,稍后我们将详细介绍。除此之外,我们还有内心的而且外停止,这决定了我们的线性梯度如何开始和结束整个蒙版。

为了看看如果我们在图像上启用线性模式,所有这些将如何发挥作用,让我们看看下面的例子:

影响

这个例子是在Div元素中设置的图像元素。Div元素有一个背景色和一个边界半径,除了有它的溢出设置为隐藏,这是视觉上圆角的图像元素。记住这一点很重要,因为我们要将蒙版应用到图像元素上,这将允许Div元素的背景色显示出来。

影响

记住之前我们的停止值是这样的:

  • 外停开始- - - - - -1%
  • 内停开始- - - - - -10%
  • 内停- - - - - -90%
  • 外停车结束- - - - - -99%

正如我们所看到的,这些停止值是用来决定如何在源材料上输出渐变蒙版的。因为我们可以完全控制梯度每一侧的开始值和结束值,如果需要,我们可以使它们不对称,或者通过将其两个值都设置为来完全删除一侧0%

另外,要记住应用程序之前的控制。如果您想通过将其值设置为来删除内容的中心部分,这可以用于反转蒙版内部:

影响

线性模式在可滚动区域或滑块上特别有用,您希望在较大的屏幕上优雅地淡出内容,或者使用微妙的方式表明在移动设备上有更多的内容可滚动(在这些场景中使用的一种常见模式)。

例如,以透视旋转木马滑块我们的模式金博宝188官网网址在一个非常大的屏幕上的课程:

影响

当内容自然地从屏幕的一边扩散到另一边时,你可能会发现,拥有掩盖边缘的能力会给它带来一种有趣的外观,似乎在两侧优雅地淡入和淡出:

影响

线性蒙版的另一个有用的用例是在顶部有内容的图像上创建微妙的渐变。在下面的简单示例中,请注意左边的第一个实例对于图像中较浅区域的一些单词没有足够的对比度。第二个例子中的蒙版有助于抵消这些内容,使其更具可读性,同时仍然保持我们背景图像的整体可见性:

影响

面具:径向

径向模式应用圆形椭圆蒙版放在你的内容上,同时也可以让你利用径向渐变()CSS在这种情况下以一些独特的方式发挥作用:

影响

注意,这个蒙版是由一对类似于我们的线性蒙版的停止,但主要的区别在这里包含在而且中心控件,它可以让你在定位蒙版时做一些独特的事情。例如,使用默认值中心在控制中,蒙版的中心点位于内容的中间,并从那里向外辐射:

影响

但是,我们可以通过将该控件设置为将径向梯度的中心点放置在左上角0% - 0%

影响

或者右下角的100% - 100%

影响

所有这些都与你如何设置contains At控件有很大的交互,除了所有其他的size和repeat参数。为了更好地理解这些功能是如何工作的,我们强烈建议花一些时间来阅读径向渐变()语法。

面具:形象

图像Mode为您提供了使用任何透明的. png作为内容顶部的蒙版,使用不透明区域作为窗口通过透明区域可以看到内容。

影响

一种简单的方法是使用一个有趣的形状(在这种情况下是一个伪logo)作为蒙版,覆盖在一个背景图像的元素上,只展示图像中与蒙版相同的部分:

影响

面具:自定义

可用于写入多个掩码图像,以及混合和匹配类型,如果需要。例如,你可以混合多种渐变类型和图像来创建复杂的掩蔽层:

影响

要了解关于这里可用的语法和选项的更多信息,一定要查看mask-image文档在线,除了mask-composite文档。请记住mask-composite是一种实验性的特性,它使用了一些跨浏览器的填充程序,因此它可能不能始终如一地工作。此外,mask-composite只有两个或两个以上才能工作mask-imageS被应用。

蒙版:重复,大小和位置

重复,的大小,而且位置每个模式底部的控件在决定你的蒙版如何表现方面起着非常重要的作用。默认情况下,这些控件设置为没有重演包含而且中心

影响

这些都是基于mask-repeatmask-size,mask-position属性分别。花点时间查看关于这些属性的文档,以充分理解它们是如何协同工作的,这样才能最大限度地利用蒙版,这一点很重要。

专长:混合混合模式

除了上面提到的属性,还有一种混合模式对照组为专业组。此特定控件是完全静态的,并且在交互或滚动控件组中没有备用设置。如果你不熟悉mix-blend-modeCSS属性,我们强烈建议您了解更多为了更全面地了解它。

本质上讲,mix-blend-modeCSS属性设置一个元素的内容应该如何与元素的父元素的内容和元素的背景混合。为了看一些实际的例子,让我们以以下情况为例:

影响

上面的截图是一个没有间隙的行元素和两个列,都设置了相同的背景颜色。是的,我们保证有两个,即使你看不到它- - - - - -我们没跟你开玩笑。

现在,我们将添加一个图像元素到第一列,并设置它高度100%和它的宽度200%,迫使它跨越Row的整个长度:

影响

我们的Image Element是身体上的只在第一栏但是在视觉上跨越两个列。这将允许我们看到如何改变混合混合模式控件的值影响图像的一半,而另一半保持不变。例如,这是变黑设置:

影响

下面是一个演示颜色燃烧:

影响

这是排除:

影响

最后,亮度:

影响

请记住,这些只是一个非常大的选择列表中的四个例子,包括:

  • 正常的
  • 屏幕
  • 覆盖
  • 变黑
  • 减轻
  • 颜色减淡
  • 颜色加深
  • 强光
  • 柔和的灯光
  • 区别
  • 排除
  • 色调
  • 饱和
  • 颜色
  • 光度

除了上面链接的MDN资源,我们也建议大家去看看这篇CSS-Tricks文章,书中有很多很棒的例子mix-blend-mode在行动中除了解释各种属性值。

注意:mix-blend-modeIE11不支持。因此,我们建议在您的设计中使用它作为更渐进的增强。

特长:背景滤镜

在特殊对照组中发现的另一项是背景筛选控制。此特定控件是完全静态的,并且在交互或滚动控件组中没有备用设置。如果你不熟悉backdrop-filterCSS属性,我们强烈建议您了解更多为了更全面地了解它。

backdrop-filter属性使您可以应用图形效果,如模糊或颜色转移到元素后面的区域。因为它适用于元素后面的所有东西,所以要看到效果,必须使元素或其背景至少部分透明。

所以让我们看一个简单的例子,看看什么是可能使用的backdrop-filter.举一个常见的例子,在一个有英雄背景图像的Section中放置一个Button作为一个动作调用:

影响

对于这个特殊的例子,我给按钮应用了一个轻微的透明背景。由于按钮后面的图像非常繁忙,按钮内部的文本在噪声中丢失了一点。现在,我们可以降低背景图像的对比度或降低按钮背景颜色的透明度,但让我们看看应用backdrop-filter能做的:

影响

在上图中,我们已经应用了模糊(10 px)backdrop-filter我们的纽扣。请注意这个简单的更改如何帮助将按钮的内容从Section的背景中分离出来。关于模糊()我们仍然可以看到内容背后的图像的一般形式(例如,注意表格的对角线),只是以一种更抽象的方式。现在让我们尝试一个不同的过滤器对比(50%)

影响

再一次,请注意我们的按钮后面的颜色对比度是如何简单地减少的,这有助于从背景中抵消它。现在,让我们尝试一些不同的hue-rotate ()过滤器:

影响

对于这个特殊的例子,虽然背景颜色的颜色变化很有趣,但我不会说它对抵消我们的内容有多大帮助。在这个特殊的例子中hue-rotate(-50度).关于backdrop-filter虽然这和过滤器,你可以堆叠多个函数来创建复杂的效果:

影响

在上图中,我们使用了下面的函数链:模糊(10px)对比度(75%)色彩旋转(180deg).请注意,这种特殊的功能组合是如何允许我们为设计添加微妙的深度和细节的。这只是一个非常简单的例子,说明了在使用时可能发生的事情backdrop-filter,但在你的设计中有更多的东西可以探索!

注意:backdrop-filterIE11不支持,必须由用户在Firefox中启用。因此,我们建议在您的设计中使用它作为更渐进的增强。

要讨论的最后一项是链接子交互对照组。这个特殊的控制组只出现在结构元素上- - - - - -节,行,列,网格,单元格和div:

影响

这个控件允许您基于发生在父元素上的交互的元素转换。例如,假设您已经创建了一个链接的列,并且当您将鼠标悬停在列上时,您希望其中的所有元素都进入它们的交互状态。要做到这一点,你可以打开列上的链接子交互控件,当鼠标悬停在列元素上时,列内的所有“交互”元素都会发生变化。

真正酷的事情是,当你把鼠标悬停在列上时,你可以使用上面看到的选择控件来触发子元素的哪些部分:

  • 颜色:如果选择此选项,将鼠标悬停在交互提供者元素上将触发所有具有“交互”颜色的嵌套元素转换为该颜色。
  • 粒子:如果选择了这个选项,当鼠标悬停在交互提供者上时,任何带有粒子的嵌套元素都将使粒子触发到它的交互状态。粒子存在于所有结构元素和按钮上。
  • 效果:如果选择此选项,当鼠标悬停在提供者上时,任何具有交互效果样式的嵌套元素都将触发该交互效果样式。这意味着使用effects模块创建的显式效果(例如。不透明度过滤器,变换)以及预制效果,如按钮和标题内的图形的过渡。

这个交互提供程序的强大之处在于,您可以混合和匹配这些目标中的任何一个。例如,你可能有一个链接的列,其中有一个按钮,这个按钮可能有一些颜色过渡以及一个添加的效果(让我们说它稍微向上平移)。如果你只启用了颜色在你的交互提供者上,这意味着鼠标悬停在列上将触发按钮的颜色变化,但效果转换不会发生,直到你直接悬停在按钮上……这只是使用交互提供程序所能实现的功能的冰山一角!

把它们放在一起

Effects模块的所有方面都是可堆叠的,并且能够结合一些需要记住的小注意事项:

  • 不要将变换和动画结合使用。
    关键帧动画有它们自己的缓动时间轴,它们在其中操作变换为该动画定义,它将在该时间轴运行时覆盖您的基值。例如,如果你设置一个静态变换旋转,然后使用动画为您的交互式风格,它定义了一个转换,没有完全相同的开始而且结束旋转,你最终会看到一个“闪烁”,因为转换应用到你的元素在静态和动画变量之间跳跃。博士TL;如果你想在Effects模块中使用预构建的动画,不要设置静态变换并使用动画的任何互动和滚动样式你选择。
  • 不透明度而且过滤器可以(几乎总是)相加使用。
    虽然您不应该组合上面提到的转换类型,不透明度而且过滤器值通常可以添加到转换和动画中。例如,您可以选择启用滚动控件组并设置您的动画在滚和你的动画推出。这个动画设置了一个不透明度而且变换时间轴在它的定义里,但是你可以加一个过滤器在此基础上加强它- - - - - -你可能会说模糊(5 px)到你的过滤器而且模糊(0 px)到你的过滤器,这将引入物体的外观进入和失去焦点。
  • 滤镜很有趣,但要谨慎使用。
    CSS过滤器属性在浏览器中开辟了许多有趣和令人兴奋的新设计可能性,特别是使用像模糊()hue-rotate ()灰度(),以及更改浏览器中标记的外观。话虽如此,但要注意,并非所有浏览器都以相同的性能对待过滤器,某些元素可能根本不应该使用过滤器。例如,你可以比如应用a灰度()在浏览器中过滤视频以改变其外观,但这样做会导致某些浏览器的CPU占用率激增,并可能使您的网站停止。有意识地使用这些函数,并始终确保在多个浏览器中测试您所做的任何事情。
  • 混合混合模式和背景滤镜很有趣,但要谨慎使用。
    几乎和之前的原因完全一样。

视频

订阅我们的YouTube频道最新消息。

看到不准确的东西了吗?让我们知道

Baidu
map