css渐变色
线性渐变
/* 渐变麻烦写法 */
.box1{
background: -webkit-gradient(linear,left center ,right center,from(red),to(yellow),color-stop(0.4,blue),color-stop(0.6,green));
}
值：线性渐变，开始位置，结束位置，开始颜色，结束颜色，插入颜色（位置，颜色）···【先x轴后y轴】
/* 渐变麻烦写法 */
.box2{background:linear-gradient(to left top,red,yellow,blue,green)
值：开始位置，颜色1，颜色2，颜色3···
经向渐变
/* 渐变麻烦写法 */
background:-webkit-gradient(radial,150 150,10,150 150,300,from(white),to(red),color-stop(0.4,blue));
值：径向渐变，内圆坐标，内圆半径，外圆坐标，外圆半径，开始颜色，结束颜色，插入颜色（位置，颜色）···
/* 渐变麻烦写法 */
background:radial-gradient( circle at 30%,yellow,blue);
值：中心点位置，颜色1，颜色2，颜色3··
svg画图
特点：
1.svg支持IE9以上
2.svg叫做伸缩矢量图形
3.svg可以通过文本编辑器来创建
4.可以被搜索，索引，脚本化和压缩
5.svg图形放大缩小尺寸不会失帧
定义
<svg class="can"></svg>创建画布
绘制图形
线体
<line x1="50" y1="50" x2="200" y2="200" stroke="red"
stroke-width="3"></line>
值：x1，y1表示起始位置坐标
x2，y2表示终止位置坐标
stroke线体颜色
stroke-width线体粗细
圆
<circle cx="100" cy="100" r="30" stroke="red" fill="pink"></circle>
值：cx,cy圆的中心点坐标 r圆的半径 fill填充颜色
椭圆
<ellipse cx="100" cy="100" rx="60" ry="40" fill="blue"><ellipse>
值：rx水平半径 ry垂直半径
矩形
<rect x="50" y="50" width="100" height="150" rx="20" ry="90"></rect>
值：x,y表示矩形的起始位置坐标 width宽度 height高度 rx ， ry 圆角弧度
多边形
<polygon points="0,100 100,10 200,50 100,150 50,100 "></polygon>
值：xy以逗号分隔，多个值以空格分隔（x1,y1 x2,y2 x3,y3）
路径
[ M开始位置 Z结束位置 ]
L直线 H水平线 V垂直线
C曲线 S平滑曲线 Q贝塞尔曲线 A椭圆曲线
阴影
<filter id="f1" x="0,0" y="0" width="200%" height="200%">
<feOffset result="offOut" dx="20" dy="20" in="SourceGraphic"></feOffset>
<feGaussianBlur result="blurout" stdDeviation="10" in="offOut"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
</filter>
<rect x="0" y="0" width="100" height="100" fill="red" stroke="yellow" filter="url(#f1)" ></rect>
值：x,y表示起始位置坐标 width宽度 height高度 feOffset偏移位置 dx ，dy是xy轴的偏移量
feGaussianBlur模糊效果 stdDeviation模糊度 feBlend组合成整个面积 in关联多个标签
过渡
1.transition-property指定过渡属性
none不指定动画延迟效果 all所有都加上
2.transition-duration过渡时间
单位：秒数s
3.transition-timing-function动画速率
linear线性 ease平滑
ease-in由慢到快 ease-in-out由慢到快再到慢
4.transition-delay延迟时间
单位：秒数s
变换transform
1.translate（x,y,z）移动 默认会给x轴
单位：像素或百分比
translate（）translateY（）垂直移动 translate（）前后移动
2.scale（x,y,z）缩放 默认xyz轴都缩放
单位：数字，可以为小数，不可以为负数
scaleX（）宽度缩放 scaleY（）高度缩放 scaleZ（）厚度缩放
3.rotate(x,y,z)旋转 默认z轴
单位：角度deg
rotateX（）水平旋转 rotateY（）垂直旋转 rotateZ（） 中心点旋转
4.skew（x，y）扭曲
单位：角度deg默认给X轴
skwX() 水平扭曲 skewY() 垂直扭曲
5.matrix（1，0，0，1，0，0）矩阵
值：宽度缩放 垂直扭曲 水平扭曲 高度缩放 水平移动 垂直移动
3d
transform-style:presrve-3d 开启3d
transform-origin：x y z 偏移中心点
动画：不需要任何事件操作
1.animation-name 动画名称
2.animation-duration 动画时间 单位：秒数s
3.animation-timing-function 动画速率
4.animation-delay延迟时间 单位：秒数s
5.animation-iteration=count 循环次数 单位：整数数字 infinite无限循环
6.animation-direction 是否要反向运动
normal 正常 alternate正反交替 注意：循环次数必须大于2，才能正反交替
7.animation-paly-state动画状态
running 运动 paused 停止
8.animation-fill-model 动画时间之外状态
none不设置 backwards 开始位置 forwards 结束位置
执行动画
@keyframes +名称{
方法1 form{}
to{}
方法2 0%{} 50%{} 100%{}
}
