【CSS】书封展示

1. 【CSS】书封展示
   1. 演示
   2. 解析
   3. 代码

演示

Open fullscreen:

Open fullscreen:

Open fullscreen:

解析

• 背景的磨砂质感使用 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>