使用过滤器创建悬停效果
过滤器使您可以控制应用于元素及其子元素的视觉效果。这些对于状态更改非常有用,比如在悬停时将灰度图像更改为彩色。
了解更多滤镜和其他效果.
本课:
您可以选择不同的过滤器选项:
您可以应用筛选器,就像您可以在任何地方对任何元素的任何类设置样式一样。您可以直接在图像上应用过滤器-您也可以在有子元素的元素上添加过滤器。
例如,你有3个链接块,它们都具有相同的类(例如,“价格链接块”)。
要添加模糊过滤器:
如果返回到Filter下拉菜单并从模糊切换到灰度,链接块及其子块将变成灰度。
在灰度滤镜之上添加亮度滤镜:
在这个例子中,两个滤镜——灰度和亮度——都像层一样设置。您可以切换每个过滤器的可见性,或拖动每个层来改变它们的顺序。
当一个元素处于不同的状态时调整它的过滤器:
的徘徊属性的属性没有一个状态(这是您最初设置时的样式灰度而且亮度过滤器)。结果,这些过滤器保持完全相同。
使用实例在悬停状态下更改过滤器。
将鼠标悬停在Link块上,可以看到这些更新后的效果。
添加一个过渡来平滑无和悬停状态之间的滤镜效果:
这将应用一个转换到任何过滤器,你已经设置在None和Hover状态之间改变。
播放过渡的持续时间,并将鼠标悬停在链接块上,以查看过渡的持续时间。在本例中,默认的200毫秒看起来不错。继续向项目中的元素添加过滤器,并为您的设计提供一些额外的乐趣和交互性!
在提交表单时出了问题。请联系support@www.raktarban.com