前言
之前一直在玩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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=Content-Type content="text/htmlcharset=gb2312">
<title>我的test文件</title>
<script type="text/javascript" type="gb2312">
function dianjixianxian() { //v9.0
var i,p,v,obj,args=dianjixianxian.arguments
for (i=0i<(args.length-1)i+=2)
with (document) if (getElementById &&((obj=getElementById(args[i]))!=null)) { v=args[i+1]
if (obj.style) { obj=obj.stylev=(v=='xianxian')?'visible':(v=='yinchang')?'hidden':v}
obj.visibility=v}
}
</script>
<style>
a{TEXT-DECORATION:none}
</style>
</head>
<body>
<div id="a" onmouseout="dianjixianxian('a','yinchang')" onmouseover="dianjixianxian('a','xianxian')" class="a">凡推荐的简历信息真实，并且被推荐人通过雇主方的面试进入公司，即为有效简历。岗位信息以天铭中文站诚聘英才页面公布的为准，包括兼职语言翻译及外包设计师，但不包括兼职编辑人员、培训生。</div>
<div class="b"><a href="#" onmouseout="dianjixianxian('a','yinchang')" onmouseover="dianjixianxian('a','xianxian')" >什么是有效简历</a></div>
</body>
</html>
上面这个代码就可以实现你要的效果应该
你不能触发onmouse我想是你代码写错了,你没给出全部的代码,具体我也不好看出你错在哪,就自己写了个
