CSS 幻术 | 有关光影效果的黑魔法

╰半夏微凉° 2022-10-17 01:39 343阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![d5b35a415795567e3583963220589515.png][]

# 来源：仿生狮子 #

https://juejin.cn/post/6965488051695353886

## 前言 ##

总听人说光和影是孪生兄弟，有光就有影。其实不然，如果没有光线强弱的对比，也就不会有阴影的存在。我们总是依靠物体表面的反光来感知世界，假设所有物体都能完全吸收光线，那世界将变得黑漆漆一片。

所谓只有理解光，才能驾驭阴影。**好的设计师往往都是用光高手，能通过复杂的光影向读者传达出物体的质感、空间感以及层次感**texture。他们画出来的设计稿都是漂漂亮亮的，这可苦了广大前端同胞！在浏览器中，我们只能用寥寥几个 CSS 属性，束手束脚地同时还想方设法地还原设计稿。毕竟，相比我们用的 CSS 手枪，设计师们用的 AE、C4D 看起来就像大炮一样！

## 常见光影效果 ##

好在我们可以暂且假以性能为由，继续正大光明地怎么简单怎么来（汗）。就像一提到光影效果，大家第一反应肯定是操起 box-shadow、text-shaodw、drop-shadow 三件套直接开画。就大部分场景来说，这些属性还挺好用的，可用它实现多种效果，比如单侧投影、空心投影和投影动画。若涉及到彩色阴影、长投影或是倒影，就需要结合其它 CSS 属性打辅助了。

彩色投影，可以让伪元素继承父元素的背景，再加模糊滤镜即可。这个思路也可以用来制作毛玻璃效果frosted-glass。

![2afbcd85b0ac548e6654b60d1767b1d2.png][] 彩色投影

.avator {
      position: relative;
      background: 'xxx';
    }
    .avator::after {
      content: "";
      position: absolute;
      top: 10%;
      width: 100%;
      height: 100%;
      /* 伪元素继承父元素背景 */
      background: inherit;
      /* 再加一些稀奇古怪的滤镜，调一调参数 */
      filter: blur(10px) brightness(80%) opacity(.8);
      z-index: -1;
    }
    复制代码

制作倒影可以使用 -webkit-box-reflect 属性box-reflect。兼容性还不错，除了火狐和 IE，其余浏览器都能用。另一种方法则是用伪元素将父元素复制一份，再 transform 倒转一下位置。

![667462411464edfe6da2273ceb0a0453.gif][] https://codepen.io/TheDutchCoder/pen/IKqpA

阴影的另一面是高光。画高光的思路可以直接套画阴影的思路，只不过需要将投影的颜色改为半透明白色。

![7426f0643b2d715d80185541fa5cd0f7.png][] https://codepen.io/Lionad/pen/rNWMVGb

另一种方法是用背景渐变或伪元素模拟高光。若再配合 CSS 动画，可以轻松实现扫光等效果。

![95e0bdb6c799103dc1b8e60c994535ab.gif][] 扫光动画

body:before {
      content: "";
      position: absolute;
      top: 0;
      width: 200vw;
      height: 35px;
      background-color: rgba(255, 255, 255, 0.4);
      transform: rotate(45deg);
      animation: scan-light 2s ease-in infinite;
    }
    @keyframes scan-light {
      from {
        right: -100vw;
      }
      to {
        right: 40vw;
      }
    }
    复制代码

## 进阶光影效果 ##

### 纹理 ###

以上提到的几种绘制光影的方法，主要用来传达物体的形状及位置。比方说，倒影和渐变高光可以用来传达物体的质感，展示物体光滑到足以发生镜面反射的表面。当然，这是理想情况。现实中的物体很少有平滑的表面，就算肉眼可见的光滑表面，微观上而言也是坑坑洼洼不堪入目。

![b5a173ebbfa201ccf2d084f3cdfdd68e.png][] 物体的微观表面

一旦我们开始使用 CSS 去模拟高级光影，首先碰到的难题就是如何处理磨砂表面。以下介绍一种简单实现磨砂表面的思路，在寻常场景用用还是阔以的。

**物体表面是什么样，我们就给它贴什么样的图片，这种方法叫做材质贴图**。我们用一个简单的材质贴图为例，先用 PS 弄一张纯色的背景，然后分别随机填充一些稍微亮一点高光和稍微暗一点的像素点linegradient-material，就能获得类似下图结果。

![f46bdfff53a097029529cf44655d382f.png][] 材质图片

我们再把这张材质平铺为文档背景，就可以得到类似磨砂金属般的表面纹理（由于图片压缩的原因，效果可能不好，可直接前往Codepen查看细节）。

![4f5d51c7d1d1583e9f73c722c77b2632.png][] https://codepen.io/Lionad/pen/mdWWxdg

不同的高光和阴影细节会给人不同的感受，比方说这里有一张雪花电视效果图，其高光像素和阴影像素的对比度要比磨砂金属表面的大得多。

![4d153eb31eeb27a59ca7e013b2578565.png][] https://codepen.io/joeyhoer/pen/CojIk

使用图片的不便之处在于没有办法边调整细节边预览，并且 PS 可能超出前端的技术栈范围了。好在我们还有 SVG 这个神器why-svg。以下是一套“标准的”材质生成代码，可以用来生成非常多种类的材质。

其中，feDiffuseLighting 是一种噪音滤镜，可以创建出随机的材质图片。feDiffuseLighting 是光源滤镜。feDistantLight 指示用平行光作为光源。

光源？弄个材质还要这么复杂嘛？

先别急，**光源其实也就几种：点状光、平行光、聚光。可以简单理解成电灯泡、太阳以及戏剧灯**。由于我们还将在表面材质的话题中停留一会儿，暂且只需要用到平行光。

![49c579739e8db0521be804b0c645be25.png][] https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/feDiffuseLighting

大致了解了上面那段 SVG 是什么意思，我们就开始愉快地调参数啦。

先试试降低灯光到表面的距离（减小 elevation）以增加高光面和阴影面的对比度。获得了以下看起来像是某种土壤的纹理。

![10edd1e2205e720d4e9662b7c904051f.png][] 土壤纹理

接下来拉高灯光，调整光照颜色（lighting-color），再把纹理弄粗糙一些（减小 baseFrequency），获得了类似大理石的纹理（也许有点像白色的牛皮纸）。

![4d4b9fd0f9858d5fc67aecf0b9e35dfe.png][] 大理石纹理

增加 baseFrequency、调整表面基准高度 surfaceScale 获得平滑纹理，再调整灯光高度降低高光和阴影的对比度，得到了白石灰墙壁纹理。

![0fa5d8270302c829f1bde2e7d6ea730b.png][] 白石灰墙壁

各位应该发现了白石灰墙壁的代码相比“标准模板”增加了一个高斯模糊滤镜（feGaussianBlur）。**原则上滤镜无限叠加，可以做出非常多好玩的效果**。比方说，有大佬用 SVG 画云朵。对，你没听错。以下是用 SVG 画的云朵纹理cloud。

![ffb71691fab8a16de659130faf2d434b.png][] 云朵材质

### 菲涅尔效应 ###

说完了粗糙的表面怎么画，我们再看看画光滑表面又有哪些原则。说起水和金属这种有相对光滑的表面的材质，不得不提到菲涅尔效应。

一句话介绍菲涅尔效应：如果你站在湖边低头看脚下的水，你会发现水是透明的，反射不是特别强烈，能看到水底；如果你看远处的湖面，你会看见山和天空的倒影。

![e319e45ca3f9204e31c29a668df90dca.png][] 菲涅尔效应

每种材质都有各自的菲涅尔值，这是根据其折射率决定的，表明了会有多少光线被物体吸收，又有多少光线从物体表面反弹fresnel。以下用 chaosgroup.com 的案例做说明。

![7034102cbbfe4e002b8c2465c61afb87.png][]

图中有一个粗糙的球体，右侧图片中的球体边缘反射了天光而显得边缘发光，左侧图片中球体边缘则没有此现象。球体表面粗糙，菲涅尔效应会变得非常微弱，所以左图是正确结果；如果球体类似金属或水面，表面光滑，那么正确结果应当类似右图。

了解菲涅尔效应之后，我们就可以根据经验凭空画一些高菲涅尔效应的物体。下图是 Oscar Salazar 用 CSS 画的水滴。他用 box-shadow 给水滴的下缘增加了大量的透明白色阴影来模拟菲涅尔效应。

![c10aaf61044d9bbc628e6240a5e97ff5.png][] 水滴效果

如果对比了现实中的水滴，你会发现 Oscar Salazar 画的并不“真”。但是因为水滴的放大作用，再加上光影效果，十分抓人眼球，给人“神似”的感觉，所以并不会觉得画得有问题。

![3747840a1a1c596d850890b755f6f047.png][] 现实中的水滴

下图是 Envato Tuts+ 画的毛玻璃效果。左边是原版，右边是增加了菲涅尔效应后的修改版本。修改后的版本看起来像是边缘平滑的玻璃版，而不是塑料板儿一块draw-not-sure。

![761437a3777ff4ad2be7d5617155f263.png][]

## 场景实战 ##

限于技术，还有很多种类的光影效果文中没有提到，以后有机会的话出个续集吧（咕咕咕预定中）。这里我们用一个 CSS 绘制的书籍封面效果作为结尾，也顺便串联一下上文提到的技术。素材只给两张书籍封面图片，点此下载第一张，点此下第二张refferer，目标是实现以下效果compressed。

![b55a2d8f77139052b3ca59b7812c2fa0.png][]

《乞力马扎罗山的雪》

![8f84fa72f00deb700e28dadfa7a17922.png][]

《八百万种死法》

### 搭出框架 ###

首先，观察图像，背景是一张纸，上面有一本书；光源在右上角，大概是平行光，光源高度离纸面不远。我们先用 HTML 搭出框架。

<div class="display-container">
      
      <div class="paper" />
      
      <div class="book">
        
        <div class="paper" />
        
        <img class="corner" src="xxx" />
      </div>
    </div>
    复制代码

### 处理纹理 ###

然后我们用 SVG 调出类似纸面的纹理效果，打光，然后设为背景。

![45cdaa54c7ec0108d2496830cae99aae.png][] 纸纹理 ![0710c363de3da96578474b8063d85743.png][] 纸纹理打光后

### 封面细节 ###

紧接着开始绘制书籍封面，谨记有三个部分要处理：材质、高光和阴影。处理完之后结果如下。

![8ffb0bef8dcca99f1d05cd0cf9e31d1d.png][] 为添加图片的封面

有一些小细节要注意。

*  封面折痕的处理
 *  模仿闭塞阴影
 *  防止边缘过于锐利

先来说说折痕的处理。如果你手头有一本实体书，那再好不过了fold-mark。试着用闪光灯打光，看看折痕上的光影，应该能发现折痕不过就是一道亮面和一道暗面的组合。我们可以用渐变来模拟这条折痕。

![3ee85b9b6681ee4d36b51aa51a63de6e.png][] 封面折痕

.book-cover .book::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-repeat: no-repeat;
      background-image:
        /* 1. 这条渐变是比较明显的那道折痕 */
        linear-gradient(to right, rgba(0,0,0,0.1) 0.3%, rgba(255,255,255,0.09) 1.1%, transparent 1.3%),
        /* 2. 这条一像素的渐变是封面最左侧的折痕（没有暗面） */
        linear-gradient(to right, rgba(0,0,0,0.2) 0, rgba(255,255,255,0.08) 0%, transparent 0.5%);
      background-size: 50% 100%, 50% 100%;
      background-position: 0% top, 9% top;
    }
    复制代码

然后再说说闭塞阴影。闭塞阴影的概念非常简单，指两个物体靠得比较近，遮住了光线；靠得越近的地方，阴影就越黑occlusion-shadow。对应到 CSS，drop-shadow 产生的阴影很“实”，但不能叠加；box-shadow 产生的阴影可调节阴影范围，但会向四周扩散。我们可以通过叠加 drop-shadow 和 box-shadow 的方式来模拟出更真实的阴影效果。

.book-cover .book {
      position: relative;
      /* 由于阴影对视觉中心有影响，所以把书整体向右上方挪一些 */
      margin-top: -1vh;
      margin-right: -1vh;
      width: 32%;
      max-width: 600px;
      font-size: 0;
      box-shadow: 
        -55px 40px 30px 0 rgb(0 0 0 / 10%), 
        -27px 25px 35px -5px rgb(0 0 0 / 20%),
        -10px 10px 15px 5px rgb(0 0 0 / 10%), 
        -12px 12px 10px 0 rgb(0 0 0 / 20%),
        -7px 7px 8px 0 rgb(0 0 0 / 10%),
        -5px 5px 5px 0 rgb(0 0 0 / 20%),
        -2px 2px 3px 0 rgb(0 0 0 / 30%);
      filter: drop-shadow(-20px 20px 15px rgba(0, 0, 0, .65));
    }
    复制代码

实现效果如下图。位置一指闭塞阴影，离书越近则阴影越浓重；位置二是 box-shadow 向外扩散的效果，和光源位置相背，违反了人的认知经验，需要避免。

![20e84b97e465656bf77888323179b35d.png][] 阴影效果

再是关于如何防止边缘过于锐化。~~还未处理前，书籍的边缘类似以下这张图。~~由于图片被压缩，什么细节都看不出来了，这里直接介绍一下防止边缘锐化的方案吧。把两张图片叠一起，下面那张图片模糊一像素，上面那张图片 border-radius 设置 2 像素，搞定。

![f4c8fdab384305d22b35f0dfd0212231.png][] 封面边缘

### 成品展示 ###

最后，把所有代码整合到一起，调调参数，改改细节，就完成啦。嘿嘿，再放一张效果图。可以到 Codepen 查看最终效果。

![4c90ee077a689334756b2df34adddbe8.png][] 《罗生门》

啥，你想做一本能翻页的书？

那得去康康 turn.js 的实现turnjs。效果如下图，其中也有用到菲涅尔效应哦。

![66d0fd80a748802ee4e3f5769715eb54.png][] turn.js

## 阅读更多 ##

**希望本文能对你有所帮助，我是仿生狮子，各位下期见~**

想看看这篇文章是如何被创造的？你能从我的博客项目中找到答案；欢迎 Star & Follow；也请大家多来我的线上博客逛逛，排版超 Nice 哦~

--------------------

1.  人话就是：物体的材质、形状以及位置。↩
2.  *How to create a frosted glass effect using CSS?*↩
3.  《-webkit-box-reflect 属性简介及元素镜像倒影实现》↩
4.  其实用渐变+随机的方法也能生成类似磨砂金属的材质贴图，这样就可以不需要引入外部图片了，但过于麻烦，不好调参，还不如 base64 来得方便。↩
5.  请原谅我，我总是潜意识里把 SVG 当作 CSS 的超集，只因为可以用它来画画而且在画画方面可以吊打 CSS。↩
6.  云朵效果优化（大佬优化大佬）↩
7.  《理解光泽度的菲涅尔效应》↩
8.  “看起来像”和“现实”并不等同。就像许多画家为了营造气氛或达到想要的效果，会打破光影的物理限制。这是经验性的总结，当然，也见仁见智了。↩
9.  由于 OSS 设置了防盗链，在第三方网页应该打不开这个链接。不过我开放了空 refferer 的访问，可以使用浏览器直接打开图片再保存。↩
10. 由于图片压缩，演示的效果会打折。各位可以实操以体验完整效果及完整乐趣。↩
11. 别说你的书还是新的。↩
12. 对应游戏画面设置中的“环境光遮蔽”可能好理解一些。↩
13. CSS 也能实现翻页效果，只不过效果没那么好，见：*The Mad Magazine Fold-In Effect in CSS*↩

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[d5b35a415795567e3583963220589515.png]: /images/20221014/bc7a01e5e12d492cb7cb177d1f234ff6.png
[2afbcd85b0ac548e6654b60d1767b1d2.png]: /images/20221014/ec7e207f04314a9da6f8ec808312a56e.png
[667462411464edfe6da2273ceb0a0453.gif]: /images/20221014/8bd444c5ace4469b866dc150db2f5cb9.png
[7426f0643b2d715d80185541fa5cd0f7.png]: /images/20221014/155fe589f8084d3cbba512377683b3af.png
[95e0bdb6c799103dc1b8e60c994535ab.gif]: /images/20221014/dfbc673928e24c4a9d5391be55caf0c1.png
[b5a173ebbfa201ccf2d084f3cdfdd68e.png]: /images/20221014/82c742313b2a4941bc70ed3d9c93cd7c.png
[f46bdfff53a097029529cf44655d382f.png]: /images/20221014/344ecee3a1574a82b2c30777bd8656c6.png
[4f5d51c7d1d1583e9f73c722c77b2632.png]: /images/20221014/e95b3f40f60f406e888ac8d88e6fce7b.png
[4d153eb31eeb27a59ca7e013b2578565.png]: /images/20221014/c227a9ed3d8f4c4ebc621ab11d40b494.png
[49c579739e8db0521be804b0c645be25.png]: /images/20221014/db70c5c4cf124e3eb85bb5bcc697f39c.png
[10edd1e2205e720d4e9662b7c904051f.png]: /images/20221014/2c0cb3ded4df4737ac2b18ab9b27c975.png
[4d4b9fd0f9858d5fc67aecf0b9e35dfe.png]: /images/20221014/7e122809d6704b1cab134f21e96f44db.png
[0fa5d8270302c829f1bde2e7d6ea730b.png]: /images/20221014/a0fd615d329646acac67a2e51268efb9.png
[ffb71691fab8a16de659130faf2d434b.png]: /images/20221014/72dd710afde2464fb14e4c403c6a195f.png
[e319e45ca3f9204e31c29a668df90dca.png]: /images/20221014/0cc051f0991341f987fb1230cfc1e08e.png
[7034102cbbfe4e002b8c2465c61afb87.png]: /images/20221014/ca7c2ca0320846beba2404d98f3c91b1.png
[c10aaf61044d9bbc628e6240a5e97ff5.png]: /images/20221014/20cdf9c349154667b1c02f16d63f3280.png
[3747840a1a1c596d850890b755f6f047.png]: /images/20221014/68fa0a56211e46b29a4ec1fe4c742b9b.png
[761437a3777ff4ad2be7d5617155f263.png]: /images/20221014/30240085fa8e41df9cb2a580207082e8.png
[b55a2d8f77139052b3ca59b7812c2fa0.png]: /images/20221014/baf98734be684a12970f221f002e91d5.png
[8f84fa72f00deb700e28dadfa7a17922.png]: /images/20221014/9845eced7b3b497d84374e414420c00f.png
[45cdaa54c7ec0108d2496830cae99aae.png]: https://img-blog.csdnimg.cn/img_convert/45cdaa54c7ec0108d2496830cae99aae.png
[0710c363de3da96578474b8063d85743.png]: /images/20221014/fd3a824037904f2da32e0da3a6851a28.png
[8ffb0bef8dcca99f1d05cd0cf9e31d1d.png]: /images/20221014/3b0c319cc03f4fa6b19b22709cd3300f.png
[3ee85b9b6681ee4d36b51aa51a63de6e.png]: /images/20221014/8f6d80a593814e46ba541a4114e20c4a.png
[20e84b97e465656bf77888323179b35d.png]: /images/20221014/fc39be5575a44a678d57fda1779c2aec.png
[f4c8fdab384305d22b35f0dfd0212231.png]: /images/20221014/bc04776872cb401e9e7c0142ffc62961.png
[4c90ee077a689334756b2df34adddbe8.png]: /images/20221014/30fa1d5520724d47973ac48e9347df27.png
[66d0fd80a748802ee4e3f5769715eb54.png]: /images/20221014/3b1cc4251379420082f7febea550846a.png