有趣的CSS数学函数

　　前言
　　之前一直在玩three。js，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在CSS中也用上这些数学函数，但发现CSS目前还没有，据说以后的新规范会纳入，估计也要等很久。
　　然而，我们可以通过一些小技巧，来创作出一些属于自己的CSS数学函数，从而实现一些有趣的动画效果。
　　让我们开始吧！CSS数学函数
　　注意：以下的函数用原生CSS也都能实现，这里用SCSS函数只是为了方便封装，封装起来的话更方便调用绝对值
　　绝对值就是正的还是正的，负的变为正的
　　可以创造2个数，其中一个数是另一个数的相反数，比较它们的最大值，即可获得这个数的绝对值functionabs（v）｛returnmax（｛v｝，calc（1｛v｝））；｝中位数
　　原数减1并乘以一半即可functionmiddle（v）｛returncalc（0。5（｛v｝1））；｝数轴上两点距离
　　数轴上两点距离就是两点所表示数字之差的绝对值，有了上面的绝对值公式就可以直接写出来functiondist1d（v1，v2）｛vdelta：calc（｛v1｝｛v2｝）；return｛abs（vdelta）｝；｝三角函数
　　其实这个也不会实现不过之前看到过一篇文章〔1〕写到了如何在CSS中实现三角函数，在此表示感谢functionfact（number）｛value：1；ifnumber0｛forifrom1throughnumber｛value：valuei；｝｝returnvalue；｝functionpow（number，exp）｛value：1；ifexp0｛forifrom1throughexp｛value：valuenumber；｝｝elseifexp0｛forifrom1throughexp｛value：valuenumber；｝｝returnvalue；｝functionrad（angle）｛unit：unit（angle）；unitless：angle（angle01）；ifunitdeg｛unitless：unitless180pi（）；｝returnunitless；｝functionpi（）｛return3。14159265359；｝functionsin（angle）｛sin：0；angle：rad（angle）；Iterateabunchoftimes。forifrom0through20｛sin：sinpow（1，i）pow（angle，（2i1））fact（2i1）；｝returnsin；｝functioncos（angle）｛cos：0；angle：rad（angle）；Iterateabunchoftimes。forifrom0through20｛cos：cospow（1，i）pow（angle，2i）fact（2i）；｝returncos；｝functiontan（angle）｛returnsin（angle）cos（angle）；｝例子
　　以下的几个动画特效演示了上面数学函数的作用一维交错动画初始状态
　　创建一排元素，用内部阴影填充，准备好我们的数学函数。。。（此处省略14个listitem）body｛display：flex；justifycontent：center；alignitems：center；minheight：100vh；margin：0；background：222；｝：root｛bluecolor1：6ee1f5；｝（这里复制粘贴上文所有的数学公式）。list｛n：16；display：flex；flexwrap：wrap；justifycontent：spaceevenly；item｛p：2vw；gap：1vw；bg：var（bluecolor1）；forifrom1through16｛：nthchild（｛i｝）｛i：｛i｝；｝｝padding：var（p）；margin：var（gap）；boxshadow：inset000var（p）var（bg）；｝｝
　　应用动画
　　这里用了2个动画：grow负责将元素缩放出来；melt负责融化元素（即消除阴影的扩散半径）。。。（此处省略14个listitem）。list｛。growmelt｛。listitem｛t：2s；animationname：grow，melt；animationduration：var（t）；animationiterationcount：infinite；｝｝｝keyframesgrow｛0｛transform：scale（0）；｝50，100｛transform：scale（1）；｝｝keyframesmelt｛0，50｛boxshadow：inset000var（p）var（bg）；｝100｛boxshadow：inset0000var（bg）；｝｝
　　交错动画计算出元素下标的中位数计算每个元素id到这个中位数的距离根据距离算出比例根据比例算出delay。。。（此处省略14个listitem）。list｛。middlestagger｛。listitem｛m：｛middle（var（n））｝；中位数，这里是7。5imdist：｛dist1d（var（i），var（m））｝；计算每个id到中位数之间的距离ratio：calc（var（imdist）var（m））；根据距离算出比例delay：calc（var（ratio）var（t））；根据比例算出delayndelay：calc（（var（ratio）2）var（t））；负delay表示动画提前开始animationdelay：var（ndelay）；｝｝｝
　　地址：SymmetricLineAnimation〔2〕二维交错动画初始状态
　　如何将一维的升成二维？应用网格系统即可。。。（此处省略62个griditem）。grid｛row：8；col：8；row：｛row｝；col：｛col｝；gap：0。25vw；display：grid；gap：var（gap）；gridtemplaterows：repeat（var（row），1fr）；gridtemplatecolumns：repeat（var（col），1fr）；item｛p：2vw；bg：var（bluecolor1）；foryfrom1throughrow｛forxfrom1throughcol｛k：col（y1）x；：nthchild（｛k｝）｛x：｛x｝；y：｛y｝；｝｝｝padding：var（p）；boxshadow：inset000var（p）var（bg）；｝｝
　　应用动画
　　跟上面的动画一模一样。。。（此处省略62个griditem）。grid｛。growmelt｛。griditem｛t：2s；animationname：grow，melt；animationduration：var（t）；animationiterationcount：infinite；｝｝｝
　　交错动画计算出网格行列的中位数计算网格xy坐标到中位数的距离并求和根据距离算出比例根据比例算出delay。。。（此处省略62个griditem）。grid｛。middlestagger｛。griditem｛m：｛middle（var（col））｝；中位数，这里是7。5xmdist：｛dist1d（var（x），var（m））｝；计算x坐标到中位数之间的距离ymdist：｛dist1d（var（y），var（m））｝；计算y坐标到中位数之间的距离distsum：calc（var（xmdist）var（ymdist））；距离之和ratio：calc（var（distsum）var（m））；根据距离和计算比例delay：calc（var（ratio）var（t）0。5）；根据比例算出delayndelay：calc（（var（ratio）2）var（t）0。5）；负delay表示动画提前开始animationdelay：var（ndelay）；｝｝｝
　　地址：SymmetricGridAnimation〔3〕另一种动画
　　可以换一种动画shuffle（穿梭），会产生另一种奇特的效果。。。（此处省略254个griditem）。grid｛row：16；col：16；row：｛row｝；col：｛col｝；gap：0。25vw；item｛p：1vw；transformorigin：bottom；transform：scaleY（0。1）；｝。shuffle｛。griditem｛t：2s；animation：shufflevar（t）infiniteeaseinoutalternate；｝｝｝keyframesshuffle｛0｛transform：scaleY（0。1）；｝50｛transform：scaleY（1）；transformorigin：bottom；｝50。01｛transformorigin：top；｝100｛transformorigin：top；transform：scaleY（0。1）；｝｝
　　地址：ShuffleGridAnimation〔4〕余弦波动动画初始状态
　　创建7个不同颜色的（这里直接选了彩虹色）列表，每个列表有40个子元素，每个子元素是一个小圆点
　　让这7个列表排列在一条线上，且z轴上距离错开，设置好基本的delay。。。（此处省略39个listitem）。。。（此处省略6个list）。lists｛listcount：7；colors：red，orange，yellow，green，cyan，blue，purple；position：relative；width：34vw；height：2vw；transformstyle：preserve3d；perspective：800px；。list｛position：absolute；top：0；left：0；display：flex；transform：translateZ（var（z））；forifrom1throughlistcount｛：nthchild（｛i｝）｛bg：｛nth（colors，i）｝；z：｛i1vw｝；basicdelayratio：｛ilistcount｝；｝｝item｛w：0。6vw；gap：0。15vw；width：var（w）；height：var（w）；margin：var（gap）；background：var（bg）；borderradius：50；｝｝｝
　　余弦排列
　　运用上文的三角函数公式，让这些小圆点以余弦的一部分形状进行排列。lists｛。list｛item｛itemcount：40；offset：pi（）0。5；wavelength：21vw；forifrom1throughitemcount｛：nthchild（｛i｝）｛i：｛i｝；ratio：（i1）（itemcount1）；angleunit：pi（）ratio；wave：cos（angleunitoffset）；singlewavelength：calc（｛wave｝var（wavelength））；nsinglewavelength：calc（var（singlewavelength）1）；｝｝transform：translateY（var（nsinglewavelength））；｝｝｝
　　波动动画
　　对每个小圆点应用上下平移动画，平移的距离就是余弦的波动距离。lists｛。list｛item｛t：2s；animation：wavevar（t）infiniteeaseinoutalternate；｝｝｝keyframeswave｛from｛transform：translateY（var（nsinglewavelength））；｝to｛transform：translateY（var（singlewavelength））；｝｝
　　交错动画
　　跟上面一个套路，计算从中间开始的delay，再应用到动画上即可。lists｛。list｛item｛n：｛itemcount1｝；m：｛middle（var（n））｝；imdist：｛dist1d（var（i），var（m））｝；ratio：calc（var（imdist）var（m））；square：calc（var（ratio）var（ratio））；delay：calc（calc（var（square）var（basicdelayratio）1）var（t））；ndelay：calc（var（delay）1）；animationdelay：var（ndelay）；｝｝｝
　　CSS数学函数能实现的特效远不止于此，希望通过本文能激起大家创作特效的灵感参考资料
　　〔1〕在CSS中使用三角函数绘制曲线图形及展示动画：https：github。comchokcocoiCSSissues72
　　〔2〕SymmetricLineAnimation：https：codepen。ioalphardexpenvYmqvpe
　　〔3〕SymmetricGridAnimation：https：codepen。ioalphardexpenzYwgdZO
　　〔4〕ShuffleGridAnimation：https：codepen。ioalphardexpenYzVmYaV
　　〔5〕RainbowSine：https：codepen。ioalphardexpenGREKJbL