【绘画系列】书封展示

演示

解析

  • 背景的磨砂质感使用 SVG 绘制。
  • 在磨砂背景上叠加了一层来自右上角的 radial-gradient 渐变仿制点光源。
  • 书的褶皱使用 linear-gradient 渐变绘制。
  • 书的边缘进行了模糊处理。
  • 阴影使用了多重阴影。

代码

磨砂滤镜代码示例:

<svg width="0" height="0">
  <filter id="book-ppt-paper-1">
    <feTurbulence type="fractalNoise" baseFrequency='.95 .95' numOctaves="80" result='noise' />
    <feDiffuseLighting in='noise' lighting-color='#004F85' surfaceScale='.8' result="grind">
      <feDistantLight azimuth='500' elevation='50' />
    </feDiffuseLighting>
    <feGaussianBlur in="grind" stdDeviation=".5"/>
  </filter>
</svg>
本文最后更新于: January 31 2021 00:01