CSS样式-特效集

知识篇

滤镜的三种做法：

1. canvas
2. css 功能较弱
3. svg
   • SVG Filters 模板效果

特效篇

故障波纹动效：

• 使用 svg 滤镜中的两种滤镜
  • 湍流滤镜 — 用到Perlin Noise算法(如连绵起伏的山峰，凹凸不平的地面，大理石的纹理，纸张的褶皱)
    • feTurbulence 关键参数
      • type: turbulence(尖锐) | fractalNoise(柔和) — 此处选 turbulence
      • baseFrequency：横向 纵向 (0-1 值越小，噪声频率越小) — 此处 0 0.4
  • 置换滤镜
    • feDisplacementMap
      • scale: 值越大，受噪声的影响越大 // 40
• 使用上面的 svg filter 模板效果网站调整好后，复制生成的代码
• 回到页面中使用<svg style="display: none"><defs>黏贴代码</defs></svg>
  • 本质只是借用 svg 效果，所以隐藏不显示，使用 filter 的 id，此 id 可以自定义
• 在向要使用的元素或页面中的 class 添加 filter: url(#id)即可
• 动画效果，关键在baseFrequency值的改变，使用 GSAP 库来修改
• 主要使用 GSAP 的时间轴来实现，获取 feTurbulence 选择器，在 timeline 的回调函数中设置改变的 key 和 value
• 并定义一个初始值，通过调用 timeline 来控制值的变化和过渡时间
• timeline 中先暂停动画，然后获取图片的选择器，
• 判断图片是否完成加载 complete，加载完就调用 play 否则就监听 load 事件，等待完成播放