一. CSS3样式：
1. Rgba:
1>. r Red 红 0-255
2>. g Green 绿 0-255
3>. b Blue 蓝 0-255
4>. a Alpha 透明 0-1
2. text-shadow:x y blur color, …
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡，
text-shadow:2px 2px 4px black 注意：有多个阴影的先渲染后面的，再渲染前面的
叠加：text-shadow:2px 2px 0px red, 2px 2px 4px green;
层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
二. css3的遮罩，只支持webkit浏览器，并且必须加上-webkit-
1. 遮罩路径，可以用渐变代替图片，如：
-webkit-mask-image:url(circle.svg);
-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0))); //渐变
2. 遮罩平铺方式：
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
3. 遮罩位置：
-webkit-mask-position:x y;
4. css3的倒影
样式：box-reflect，只支持webkit浏览器，并且必须加上-webkit-
direction 倒影方向 above|below|left|right;
如下是一个倒影例子的集合样式：
-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);从左到右依次的值为倒影方向，倒影距离，渐变（可选）
三. css3的旋转
1. 2D变换：transform
2. 旋转函数
transform:rotate() // 取值度数（deg）
transform-origin:x y //旋转的基点
3. 倾斜函数
transform:skew() //取值度数（deg）
transform:skewX() //水平方向倾斜
transform:skewY() //垂直方向倾斜
4. 缩放函数
transform:scale() //取值（正数、负数和小数）
transform:scaleX() //水平方向缩放
transform:scaleY() //垂直方向缩放
5. 位移函数
transform:translate() //像素值
transform:translateX() //水平方向位移
transform:translateY() //垂直方向位移
6. 3D变化环境设置：
transform-style:preserve-3d //建立3D空间
perspective: 景深（像素）
perspective-origin:x y 景深基点
7. 3D变化新增函数
transform:rotateX() //水平方向旋转
transform:rotateY() //垂直方向旋转
transform:rotateZ() //z轴方向旋转（默认2d旋转）
transform:translateZ() //z轴方向位置
transform:scaleZ() //z轴方向缩放
四. css3动画：animation
1. 关键帧——keyFrames：类似于flash，只需指明两个状态，之间的过程由计算机自动计算
2. 关键帧的时间单位
数字：0%、25%、100%等
字符：from(0%)、to(100%)
格式
@keyframes 动画名称
{
动画状态
}
@keyframes test
{
from { background:red; }
to { background:green; }
}可以只有to
3. animation-fill-mode :forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
调用的标签(#div1、xxx:hover之类的)
4. 必要属性
animation-name动画名称（关键帧名称）
animation-duration动画持续时间
例如：
-webkit-animation-name: 'xinzhuoyue';
-webkit-animation-duration: 4s;
animation-play-state 播放状态（ running 播放 和paused 暂停 ）
5 . 可选属性：
animation-timing-function动画运动形式
linear匀速。
ease缓冲。
ease-in由慢到快。
ease-out由快到慢。
ease-in-out由慢到快再到慢。
cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-delay动画延迟，只是第一次
animation-iteration-count重复次数，infinite为无限次
animation-direction播放前重置，动画是否重置后再开始播放
alternate动画直接从上一次停止的位置开始执行
normal动画第二次直接跳到0%的状态开始执行