全部
  • 全部
  • 图标
  • 平面图形
  • 背景纹理
  • Mockups
  • 字体库
  • 幻灯片模版
  • Ui Kits
  • 样式/笔刷/动作
  • 网站素材
  • 视频/3D
  • 其他

[前端]巧用SVG滤镜实现图像失真效果

通过SVG滤镜,我们可以实现一些非常有趣的且独特的效果。 今天给大家分享三种鼠标光标悬停文本链接时实现设定图像动画失真效果。 我们使用feTurbulence和feDisplacementMap来创建不同类型的片段和类波形失真。 这种效果已经变得非常流行并且可变性非常强。菜单悬停动画-即根据鼠标动作在背景中显示图像这种做法也已经存在了一段时间,您可以看到我们基于Sara Marandi网站的示例。

注意:使用旧版浏览器可能存在不兼容性。

一起来欣赏下DEMO演示效果:

希望大家喜欢这些效果并且对您有用!下载源码及查看demo。(设计小咖编译)

分享到:

标签

热门设计资源

设计小咖小程序
设计小咖小程序

微信扫一扫
手机使用更方便!

设计小咖公众号
设计小咖公众号

关注我们的微信公众号,不错过任何福利。