余弦cos=x/r
正切tan=y/x
余切cot=x/y
正割sec=r/x 念作second
余割csc=r/y 念作co-second
sin*csc=1
cos*sec=1
tan*cot=1
sin方+cos方=1
tan方+1=sec方
1+cot方=csc方
前言
之前一直在玩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
CSS画正方形长方形很简单，本文就不说了。
一、三角形
1、CSS画等腰三角形
2、画直角三角形：
二、画圆形
注意：border-radius是width/height的一半（50%）。
画半圆：
半圆的画法是把高度设为宽度的一半，并且也只设置左上角和右上角的半径，且半径为宽度的一半。
画四分之一圆：是把高度和宽度设置为相等，只设置一个圆角，其半径等于高度或宽度。
三、画椭圆
斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。
四、平行四边形
margin-left是为了使得平行四边形可以全部在浏览器中显示出来
五、梯形
高度为0。有宽度没高度。
六、五边形、六边形
