前言
之前一直在玩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、初期不要急着自己去设计页面，直接仿站来让自己获得从0到1的能力。 找一些比较有新意的，结构上稍有复杂度的，基本没切过有高相似度的页面，时间要花在刀刃上。确实培养起了自己对CSS的兴趣。2、基础技能练习差不多了，可以找份真实的工作来巩固深入学习。比你自己业余去摸索要高效10倍。理解了CSS模块化的思想，才发现自己以前只能算是完成了一个页面，而不算是做好了它。真实的产品开发才是自己的CSS能力真正落地的开始。
3、工作后应继续关注相关一些例如Codrops 等这类能带来CSS使用灵感的网站，去思考为什么，而不是copy它的代码去完成功能。页面开发中有太多重复的工作，如果你一直用一个思路去解决问题，会有碍于经验和能力的积累，形成一个较低级舒适区的怪圈。平时也可以去codepen这类网站收集一些琐碎的灵感，增加知识面学习css过程中千万不要剥离HTML学习。当什么时候理解了html的重要性（从页面开发角度而言，它可以视为是后续良好css和js编码得以实施的基础，相当于程序中的数据结构，设计好了可以让你事半功倍），你才可以称得上是一个合格的页面开发
4、对于新人，建议除了几个关键概念，如布局、盒模型、单位等等，都不应该花大量去扣细节，甚至背书记忆，浏览性学习知道有这个东西就行，在实际应用时再去加深记忆。
以上算抛砖引玉，虽然一直认为纯粹的CSS页面开发并不适合作为前端领域里深入发展的方向，但不可否认，在学习玩耍css的过程中，带给了自己很多乐趣。
1、交错动画
有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（ delay ）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其他元素以此类推，这样它们就会错开来，形成一种独特的视觉效果。
这就是所谓的交错动画：通过设置不同的延迟时间，达到动画交错播放的效果。
本demo地址: https://codepen.io/alphardex/pen/XWWWBmQ
本demo地址： https://codepen.io/alphardex/full/KKwvKGY
一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话，就要给当前元素的延时各加上一个值，这个值就是中间元素的下标到当前元素的下标的距离（也就是下标之差的绝对值）与步长的乘积，即： delay + Math.abs(i - middle) * step ，其中中间元素的下标 middle = letters.filter(e =>e !== "").length / 2
本demo地址: https://codepen.io/alphardex/full/eYYMYXJ
本demo地址: https://codepen.io/alphardex/full/dyPorwJ
HTML元素的状态是可以动态变化的。举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成“悬浮”状态，这时我们就可以利用伪类 :hover 来选中这一状态的按钮，并对其样式进行改变。 :hover 是笔者最最常用的一个伪类。还有一个很常用的伪类是 :nth-child ，用于选中元素的某一个子元素。其他的类似 :focus 、 :focus-within 等也有一定的使用。
本demo地址： https://codepen.io/alphardex/pen/pooYKVa
谁规定按钮只能有一套边框的？利用绝对定位和 padding ，我们可以给按钮做出3套大小不一的边框来，这样效果更炫了。
本demo地址： https://codepen.io/alphardex/full/ZEYXomW
简而言之，伪元素就是在原先的元素基础上插入额外的元素，而且这个元素不充当HTML的标签，这样就能保持HTML结构的整洁。我们知道每个元素都有 ::before 和 ::after 这两个伪元素，也就是说每个元素都提供了3个矩形（元素本身1个，伪元素2个）来供我们进行形状的绘制。现在又有了 clip-path 这个属性，几乎任意的形状都可以被绘制出来，全凭你的想象力上面的动图是条子划过文本的动画，条子就是每个文本所对应的伪元素，对每个文本和其伪元素应用动画，就能达到上图的效果了。
本demo地址： https://codepen.io/alphardex/pen/jOEOEzZ
元素可以有自定义的属性值，它的命名格式通常为 data-*``attr() 用于获取元素的这种自定义属性值，并赋值给其伪元素的 content 作为其生成的内容利用这个函数，我们可以用伪元素在原先文本的基础上“复制”出另一个文本，如下图所示。
本demo地址： https://codepen.io/alphardex/full/wvBeXjd
之前有做过闪光按钮的效果：鼠标悬浮按钮上时一道光从左到右划过去。笔者就用渐变来模拟那道光，通过 transform: translateX() 将其平移至右边。
但这样明显不对啊，这光为啥能被看见呢？不应该把它给“挡”起来吗？于是乎，给按钮加上 overflow: hidden ，光在按钮外的位置时就被隐藏起来了。
这就是障眼法的力量:)
本demo地址： https://codepen.io/alphardex/pen/eYYzXBZ
更多障眼法可以看看这个作品，一次性看个够XD
提示：这里最好将 input 作为 label 的子元素，这样用户点击 label 时就能传到 input 上默认的 input 太丑怎么办？那就把它先抹掉，用 appearance: none 或 opacity: 0 都可以然后，利用兄弟选择符 ~ 来定制和 input 相邻的所有元素（ + 号也行，只不过只能选中最近的元素），例如可以用伪元素生成一个新的方框代替原先的 input ，利用伪类 :checked 和动画来表示它被勾选后的状态，本质上还是障眼法哦~
善用某些CSS特性，也可以为你的作品增色不少哦
此处包括 transition 和 transform CSS动画可以说是利用CSS设计炫酷特效的最强法器，它几乎贯穿了我的所有作品 有人问我为什么我能想出这么多的动画？笔者阅番百部，对常用的动画技巧了如指掌，同样那些酷炫的网站只要细心观察，也会给笔者带来很多设计上的灵感。一言以蔽之：只有多欣赏动画，才能写出好的动画。
为盒子添加圆角，经常用来美化按钮等组件如果设定为 50% 则是圆形，也很常用
调整多个顶点的 border-radius 可以做出不规则的曲边形状
本demo地址： https://codepen.io/alphardex/full/abbWOPR
为盒子添加阴影，增加盒子的立体感，可以多层叠加，并且会使阴影更加丝滑
如果给 box-shadow 的扩张半径设定足够大的值，可以用它来遮住背景，而无需额外的div元素
注意到 box-shadow 还有个 inset ，用于盒子内部发光利用这个特性我们可以在盒子内部的某个范围内设定颜色，做出一个新月形
本demo地址： https://codepen.io/alphardex/full/eYmGEGp
文本阴影，本质上和 box-shadow 相同，只不过是相对于文本而言，常用于文本发光，也可通过多层叠加来制作霓虹文本和伪3D文本等效果
本demo地址： https://codepen.io/alphardex/full/Exxodoq
本demo地址： https://codepen.io/alphardex/full/rNNwmZz
本demo地址 ： https://codepen.io/alphardex/full/QWWavvx
能将背景裁剪成文字的前景色，常用来和 color: transparent 配合生成渐变文本
本demo地址： https://codepen.io/alphardex/full/QWwveZG
渐变可以作为背景图片的一种，具有很强的色彩效果，甚至可以用来模拟光
这个作品用到了HTML的 dialog 标签，渐变背景，动画以及 overflow 障眼法，细心的你看出来了吗:)
本demo地址： https://codepen.io/alphardex/full/eYYxzBm
径向渐变常用于生成圆形背景，上面例子中Snow的背景就是一个椭圆形的径向渐变此外，由于背景可以叠加，我们可以叠加多个不同位置大小的径向渐变来生成圆点群，再加上动画就产生了一种微粒效果，无需多余的 div 元素。
本demo地址： https://codepen.io/alphardex/full/OJPvMGx
用一个伪元素叠在饼图上面，并将 content 设为某个值（这个值通过CSS变量计算出来），就能制作出度量计的效果，障眼法又一次完成了它的使命。
本demo地址： https://codepen.io/alphardex/full/BaydVvQ
PS里的滤镜，玩过的都懂， blur 最常用
本demo地址： https://codepen.io/alphardex/full/pooQMVp
PS里的混合模式，常用于文本在背景下的特殊效果以下利用滤色模式（ screen ）实现文本视频蒙版效果
本demo地址： https://codepen.io/alphardex/full/wvvLYpV
本demo地址： https://codepen.io/alphardex/full/ZEEBRrq
本demo地址： https://codepen.io/alphardex/full/ExaZgxp
虽然这并不是一个CSS特性，但是它经常用于完成那些CSS所做不到的事情那么何时用它呢？当CSS动画中有属性无法从CSS中获取时，自然就会使用到它了
目前CSS还尚未有获取鼠标位置的API，因此考虑用JS来进行通过查阅相关的DOM API，发现在监听鼠标事件的API中，可通过 e.clientX 和 e.clientY 来获得鼠标当前的位置既然能够获取鼠标的位置，那么跟踪鼠标的位置也就不是什么难事了：通过监听 mouseenter 和 mouseleave 事件，来获取鼠标出入一个元素时的位置，并用此坐标来当作鼠标的位移距离，监听 mousemove 事件，来获取鼠标在元素上移动时的位置，同样地用此坐标来当作鼠标的位移距离，这样一个跟踪鼠标的效果就实现了。
本demo地址： https://codepen.io/alphardex/full/OJPmQGz
CSS Houdini是CSS的底层API，它使我们能够通过这套接口来扩展CSS的功能
目前来说，我们无法直接给渐变添加动画，因为浏览器不理解要改变的值是什么类型这时，我们就可以利用 CSS.registerProperty() 来注册我们的自定义变量，并声明其语法类型（ syntax ）为颜色类型 <color>，这样浏览器就能理解并对颜色应用插值方法来进行动画还记得上文提到的圆锥渐变 conic-gradient() 吗？既然它可以用来制作饼图，那么我们能不能让饼图动起来呢？答案是肯定的，定义三个变量： --color1 、 --color2 和 --pos ，其中 --pos 的语法类型为长度百分比 <length-percentage>，将其从 0 变为 100% ，饼图就会顺时针旋转出现。
本demo地址： https://codepen.io/alphardex/full/RwNxpXQ
将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单。
本demo地址： https://codepen.io/alphardex/full/ExavZdV
