前言
之前一直在玩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
1. 执行数学运算CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。
2. 实现居中效果
使用 calc() 给我们提供另一个垂直居中元素的解决方案。如果我们知道元素的尺寸，一个典型的解决方案是使用负外边距移动自身距离高与宽的一半
3. 创建根栅格尺寸
使用 rem，calc() 函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小作为视口宽度的一部分。
4. 提高计算清晰度
使用 calc()，我们还能做很多的事情，它是 CSS 中很有用的新特性之一。
上篇介绍了网格容器、网格轨道的相关属性使用方法，如果您还不熟悉网格，建议先去看看之前的文章前端入门——css Grid网格基础知识 ，前端入门——css 网格轨道详细介绍 学习下网格基本知识。
本篇主要介绍网格项的相关属性：
以上四组属性都和网格线密切相关，它们定义了网格项如何根据网格线来定位网格项的位置。
语法如下：
属性值说明：
如下示例：
项目可以相互重叠。您可以使用 z-index 它们来控制它们的堆叠顺序。
上面介绍的grid-column-start / grid-row-start 、grid-column-end/ grid-row-end四个属性还可以使用 grid-row-start 和 grid-row-end 进行简写。
语法：
属性值：
如下示例：
使用此属性可以命名一个网格区域，以便在 grid-template-areas 属性创建的模板中引用此网格区域，或者作为grid-row-start + grid-column-start + grid-row-end + grid-column-end 的更短的简写。
语法如下：
属性值：
如下示例：
为网格区域分配名称的一种方式
作为简写
https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas
https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid
