过滤器

过滤器使您能够控制可以应用于元素及其子元素的视觉效果。这些对于状态变化非常有用，比如在悬停时将灰度图像变为彩色。

了解更多关于滤镜和其他效果．

在这节课中:

1. 理解过滤器
2. 添加过滤器
3. 调整状态
4. 添加过渡
   

理解过滤器

您可以从不同的过滤器选项中选择:

• 模糊
• 色调旋转
• 饱和
• 亮度
• 对比
• 灰度
• 乌贼
• 反
  

添加过滤器

您可以应用过滤器，就像您可以为任何地方的任何元素上的任何类设置样式一样。您可以直接在图像上应用过滤器—您也可以在具有子元素的元素上添加过滤器。

例如，你有3个链接块，都是同一个类(例如，“价格链接块”)。

添加一个模糊过滤器:

1. 去风格的面板>影响>过滤器
2. 单击加号图标过滤器
3. 选择模糊从下拉
4. 调整模糊半径来控制你的元素及其子元素的模糊级别

如果返回到Filter下拉菜单，并从Blur切换到Grayscale, Link块及其子块将变成Grayscale。

在灰度滤镜的顶部添加亮度滤镜:

1. 单击加号图标(+)过滤器
2. 选择亮度从下拉菜单
3. 拖动量滑块来调整亮度水平

在这个例子中，两个滤镜-灰度和亮度-都像图层一样设置。您可以切换每个过滤器的可见性，或拖动每个图层来更改它们的顺序。

调整状态

在不同的状态下调整一个元素的过滤器:

1. 选择连接块(例如，“价格链接块”)
2. 去选择器场在风格面板
3. 选择徘徊从下拉

的徘徊属性继承的属性没有一个状态(这是您最初设置时所设置的样式灰度而且亮度过滤器)。结果，这些过滤器保持完全相同。

更改悬停状态下的过滤器:

1. 去风格的面板>影响>过滤器
2. 单击灰度筛选您之前设置的
3. 改变量调整为0%(这将使链接块的颜色恢复)
4. 点击进入亮度过滤器
5. 改变亮度量回落至100%
   

将鼠标悬停在Link块上，可以查看这些更新后的效果。

添加过渡

添加一个过渡，使滤镜效果在None和Hover状态之间平滑:

1. 的下拉菜单选择器场然后切换回没有一个
2. 去风格的面板>影响>转换
3. 单击加号图标并添加a过渡
4. 选择过滤器从过渡类型下拉

这将应用到任何过滤器(s)之间的过渡，你已经设置改变之间的无和悬停状态。

调整转换的持续时间，并将鼠标悬停在Link块上，以查看运行中的转换持续时间。在本例中，默认的200毫秒看起来不错。继续在你的项目中添加过滤器元素，给你的设计一些额外的兴趣和交互性!

了解更多关于样式的州和平滑状态之间的动画转换．