前言
之前一直在玩three.js ，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在 CSS 中也用上这些数学函数，但发现 CSS 目前还没有，据说以后的新规范会纳入，估计也要等很久。
然而，我们可以通过一些小技巧，来创作出一些属于自己的CSS 数学函数，从而实现一些有趣的动画效果。
让我们开始吧！
注意 ：以下的函数用原生 CSS 也都能实现，这里用 SCSS 函数只是为了方便封装，封装起来的话更方便调用
绝对值就是正的还是正的，负的变为正的
可以创造 2 个数，其中一个数是另一个数的相反数，比较它们的最大值，即可获得这个数的绝对值
原数减 1 并乘以一半即可
数轴上两点距离就是两点所表示数字之差的绝对值，有了上面的绝对值公式就可以直接写出来
其实这个也不会实现~不过之前看到过 一篇文章[1] 写到了如何在 CSS 中实现三角函数，在此表示感谢
以下的几个动画特效演示了上面数学函数的作用
创建一排元素，用内部阴影填充，准备好我们的数学函数
这里用了 2 个动画：
地址： Symmetric Line Animation[2]
如何将一维的升成二维？应用网格系统即可
跟上面的动画一模一样
地址： Symmetric Grid Animation[3]
可以换一种动画shuffle （穿梭），会产生另一种奇特的效果
地址： Shuffle Grid Animation[4]
创建7 个不同颜色的（这里直接选了彩虹色）列表，每个列表有 40 个子元素，每个子元素是一个小圆点
让这7 个列表排列在一条线上，且 z 轴上距离错开，设置好基本的 delay
运用上文的三角函数公式，让这些小圆点以余弦的一部分形状进行排列
对每个小圆点应用上下平移动画，平移的距离就是余弦的波动距离
跟上面一个套路，计算从中间开始的delay ，再应用到动画上即可
CSS 数学函数能实现的特效远不止于此，希望通过本文能激起大家创作特效的灵感~
[1]在 CSS 中使用三角函数绘制曲线图形及展示动画: https://github.com/chokcoco/iCSS/issues/72
[2]Symmetric Line Animation: https://codepen.io/alphardex/pen/vYmqvpe
[3]Symmetric Grid Animation: https://codepen.io/alphardex/pen/zYwgdZO
[4]Shuffle Grid Animation: https://codepen.io/alphardex/pen/YzVmYaV
[5]Rainbow Sine: https://codepen.io/alphardex/pen/GREKJbL
以我的拙见，好的网站和 Web 应用程序应具有“真实”品质，实现这种效果涉及很多因素，但阴影是一个重要因素。
但是，当我浏览互联网时，各大网站大多数阴影都很虚假，布局盒子被模糊的灰色框覆盖，看起来并不像阴影。
本文讨论的就是如何将常见的阴影转换为美丽的、栩栩如生的阴影：
阅读受众
阴影意味着海拔，更大的阴影意味着更高的海拔。
如果我们有策略地使用阴影，我们可以创造深度视觉，就好像页面上的元素在不同层次上，并且漂浮在背景之上。
例子：
使用阴影的目的：要么增加特定元素的显着性，要么让应用程序感觉更触手可及、栩栩如生。
当我想为一个元素添加阴影时，我会添加`box-shadow并修改值，直到得到我喜欢结果。
问题是： 如果孤立地创建每个阴影，你会得到一堆不协调的阴影。如果我们的目标是创造深度视觉，我们需要每个阴影都相互配合。否则，他们看起来就是一堆垃圾：
在自然界中，阴影是光投射出来的。阴影的方向取决于灯光的位置：
一般来说，我们应该为页面上的所有元素确定一个单一的光源，通常位于左上方：
如果 CSS 有一个照明系统，我们可以为所有元素指定同一个光源，可惜CSS 没有这样的东西。
我们通过指定水平偏移和垂直偏移来移动阴影。例如，在上图中，生成的阴影具有 4px 的垂直偏移和 2px 的水平偏移。
这是内聚阴影的第一个技巧： 页面上的每个阴影都应该共享相同的比例 。 这将使每个元素看起来都来自同一个光源。
为啥所有元素比例要一样？
为什么我建议对每个元素使用相同的比例，难道每个元素相对于光源的位置都是一样的吗？
为了便利性考虑，我们一般使用相同的角度，因为计算每个元素的角度很麻烦。
如何创造一种深度视觉？
查看演示，注意值是如何变化的：
前两个数字 - 水平和垂直偏移 - 一起缩放。垂直偏移始终是水平偏移的 2 倍，这里使用了相同的比例。
当卡片升高时，有两个变化：
从算法来讲，这里面又复杂的数学算法。
我们可以从人类常识来理解这件事：
如果您在光线充足的房间内，请将手按在桌子上，然后慢慢抬起。 注意阴影是如何变化的：它远离你的手（更大的偏移），它变得更模糊（更大的模糊半径），它开始逐渐消失（更低的不透明度）。
因为我们生活中有很多经验，所以我们不需要记住一堆规则。在设计阴影时，我们只需要 运用我们的常识 。
Blender 等现代 3D 插图工具可以使用 光线跟踪 技术产生逼真的阴影和照明。
在光线追踪中，数百束光从相机中射出，从场景的表面反射数百次。这是一种计算成本很高的技术；生成单个图像可能需要几分钟到几小时！
网络用户没有那种耐心，所以 box-shadow 算法要简陋得多，它只实现了基本的模糊算法。
因此， box-shadow 阴影永远没有照片逼真，但我们可以巧妙地优化： 分层 。
我们不使用单个 box-shadow，而是把多个阴影叠加起来，阴影之间的偏移量和半径略有不同：
Philipp Brumm 一个很棒的生成分层阴影工具： shadows.brumm.af ：
性能权衡
不可否认，分层阴影是美丽的，但它们确实需要付出代价。如果我们叠加 5 个阴影分层，我们的设备必须多做 5 倍的工作！
在好的硬件上不是什么大问题，但会减慢在较旧的廉价移动设备上的渲染速度。
到目前为止，我们所有的阴影都使用了半透明的黑色，比如 hsl(0deg 0% 0% / 0.4) 。这实际上并不理想。
当我们在背景颜色上叠加黑色时，不仅会使它变暗，也会使其饱和度降低很多。
比较这两个框：
左边的盒子使用了透明的黑色。右侧的框匹配颜色的色调和饱和度，但降低了亮度。我们得到了一个更有活力的盒子！
当我们为阴影使用较深的颜色时，会发生类似的效果：
但是，左边的饱和度太低，右边的 饱和度不够 ，感觉更像是光晕而不是阴影！
实验一下：
通过匹配色调并降低饱和度/亮度，我们可以创建一个真实的阴影，没有那种“褪色”的灰色质量。
饱和度和亮度的关系
如果您熟悉 hsl 颜色格式，就会知道饱和度和亮度是独立控制的。
那么，降低亮度似乎也对饱和度有影响是不是有点奇怪？
这个问题以后有时间给大家细讲。
在本文中，我们一直在使用 box-shadow 属性。 box-shadow 是一个很好的全面工具，但它不是我们在 CSS 中唯一的阴影选项。
