<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV
{
width:100px
height:100px
position:relative
}
@keyframes mymove
{
0% {}
100% {-webkit-transform:rotate(360deg)}
}
#mybak{
position:absolute
left:0
top:0
width:100px
height:100px
background:black
-webkit-animation:mymove 10s infinite
}
#mynum{
position:absolute
left:0
top:0
width:100px
height:100px
text-align:center
color:white
font-size:70px
line-height:100px
}
</style>
</head>
<body>
<div id="myDIV"><div id="mybak"></div><div id="mynum">10</div></div>
</body>
</html>
前言
之前一直在玩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
css3 2D变形
1、位移：transform：translateX x轴位移
transform：translateY y轴位移
同时写会被覆盖，所以用复合属性写
复合属性：transform：translate（100px，100px）第一个是x轴参数 第二个是y轴参数
起始点：00点，边框的左上角的顶点
transform：translate（100px 0，） x轴距离左边100px
transform：translate（ 0，100px） y轴距离左边100px
2、缩放：transform：scale（2）里面的数字表示倍的意思
transform：scale（1）表示本身，不变
transform：scale（0.5）小于1表示缩小
transform：scale（0）表示缩小到消失
3、倾斜：transform：skew（ax，ay）表示x轴倾斜角度，y轴倾斜角度 单位是度数值deg
transform：skew（60deg，20deg）
x轴会改变宽度，y轴会改变高度
第一个表示x轴，按照逆时针方向进行旋转，宽度变化，高度不变
第二个表示y轴，按照顺时针方向进行旋转，高度变化，宽度不变
4、旋转：rotate（）单位也是deg
只设置一个值表示沿中心点旋转
rotatex 沿x轴转
rotatey沿y轴转
transition: all 2s linear .5s/加在div上
过渡属性
过渡动画函数（( transition-timing-function )
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
linear
规定以相同速度开始至结束的过渡效果
ease
规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值)
ease-in
规定以慢速开始的过渡效果
ease-out
规定以慢速结束的过渡效果
ease-in-out
规定以慢速开始和结束的过渡效果
