animation属性-动画
1.IE10,Firefox和Opera支持animation属性，Safari和Chrome用-webkit-animation替换。
2.animation有以下几个值。
| 值 | 作用 |
|---|---|
| animation-name | 规定Keyframe要调用的名称 |
| animation-duration | 动画完成所需时间(s或ms) |
| animation-timing-function | 动画执行的速度曲线 |
| animation-delay | 开启动画的延迟 |
| animation-iteration-count | 播放次数 |
| animation-direction | 是否轮流反向播放动画 |
3.动画执行速度曲线默认是ease，其是低速➡加速➡变慢三阶段完成动画，还有以下五组值。
| 值 | 作用 |
|---|---|
| linear | 全程速度相同 |
| ease-in | 全程慢➡快 |
| ease-out | 全程快➡慢 |
| ease-in-out | 全程慢➡快➡慢 |
| cubic-bezier(n,n,n,n) | 四个参数可设置0~1的数值 |
4.动画的播放次数默认是1，可通过animation-iteration-count设置指定次数或设置为infinite(无限播放)。
5.动画默认是正常播放的，可通过设置animation-direction:alternate来实现轮流反向播放。
6.示例：把一个div从0位置向下移动，并在此过程逐渐到中间的时候变为紫色，如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
width: 60px;
height: 60px;
position: relative;
background-color: greenyellow;
animation-name: animation;
animation-duration: 5s;
-webkit-animation:animation 5s infinite; /*兼容 */
animation-timing-function: ease-in;
animation-iteration-count: infinite;
/*animation: animation 5s ease-in infinite; 可写在一起 */
}
@keyframes animation{
from {
left: 0px;
top: 0px;
}
to{
left: 200px;
top: 300px;
}
50%{
background-color: rebeccapurple;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform属性-旋转，缩放等
1.transform属性允许实现对元素的旋转，缩放，移动和倾斜等功能。
2.各值如下表格所示：
| 值 | 作用 |
|---|---|
| none | 默认值不进行任何转换 |
| translate(x,y) | 定义2D转换 |
| translate3d(x,y,z) | 定义3D转换 |
| translate(x) | 只对X值转换，其余以此类推 |
| scale(x,y) | 实现2D的缩放 |
| scale3d(x,y,z) | 实现3D的缩放 |
| scale(x) | 只对x轴进行缩放，其余y,z同理 |
| rotate(角度) | 定义2D旋转，参数给一个角度(如9deg) |
| rotate3d(x,y,z,角度) | 3D旋转 |
| rotateX(角度) | 沿着X轴3D旋转，Y,Z同理 |
| skew(x角度,y角度) | 按x角度,y角度倾斜 |
| skewX(角度) | 沿着x轴2D倾斜,Y同理 |
| perspective(n) | 3D转换元素定义透视图 |
3.旋转缩放案列，如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
div{
width: 300px;
height: 200px;
position:absolute;
left: 500px;
top: 200px;
background-color: greenyellow;
/* 顺时针旋转60度 */
transform: rotate(60deg);
/*
逆时针时针旋转60度
transform: rotate(-60deg);
*/
/*
缩放，在x方向缩放10倍，在y轴方向缩放3倍
transform: scale(10,3);
*/
}
</style>
</head>
<body>
<div></div>
</body>
filter属性-滤镜
1.各值预览：
| 值 | 作用 |
|---|---|
| none | 默认值无效果 |
| blur(像素) | 设置高斯模糊，像素参数越大越模糊 |
| brightness(百分比) | 通过线性乘法调节亮度，0%全黑，100%是无变化，再往上就变亮了 |
| contrast(百分比) | 对比度调节，0%全变灰色，100%无变化，同上 |
| drop-shadow(有五个参数) | 设置阴影效果，前两个设置x,y方向偏移量，其余可选 |
| grayscale(百分比) | 灰度调节，0%无变化，100%灰色照片(大于100%同效果) |
| hue-rotate(角度) | 0deg，360deg无变化，0~360度是一个周期，所以720deg==360deg |
| invert(百分比) | 反转输入图像(反转颜色)，0%无变化，100%全部反转(大于100%同效果) |
| opacity(百分比) | 设置透明度，0%完全透明，100%无变化其余同上类似 |
| saturate() | 饱和度设置，0%完全不包含，当大于100%时饱和度比原图变高 |
| sepia(百分比) | 转换为深褐色，0%无变化，100%完全深褐色，值取(0%~100%) |
| url() | 接收一个XML文件 |
| initial | 设置为默认属性值 |
| inherit | 从父元素那里来继承filter滤镜属性 |
2.实例应用，如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.a,.b{
width: 300px;
height: 200px;
position:absolute;
left: 500px;
top: 300px;
background-color: greenyellow;
}
.a{
/* 高斯模糊30px */
filter: blur(30px);
}
.b{
top: 10px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
End
留存备忘~
