1.filter属性
定义了元素(通常是)的可视效果(例如：模糊与饱和度)

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。
注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。
详情见：CSS3 filter(滤镜) 属性 | 菜鸟教程
2.过渡
能够过度很多属性，但不能过渡没有中间过渡值的属性，比如display;

//transition:(过渡什么属性)(过渡时间)(运动速度)(等待多久); transition : width 3s linear(匀速) 1s; /*前两个必须写*/ transition : all 3s; /*所有属性一起执行*/ opacity:0; /*透明0 ~ 1*/

谁过渡给谁加，如果放入 hover 伪元素中鼠标离开就不会执行过渡
3.2D转换 （transform）
(1)2D移动，可改变元素在页面中的位置，类似定位。

transform : translate(x,y) ; transform : translateX(100px); transform : translateY(100px);

重点：
①定义2D转换中的移动，沿着X和Y轴移动元素；
②translate最大的优点是不会影响其他元素位置;
③translate中的百分比单位相对于自身元素的translate:(50%,50%); /*如果里面的参数是%,移动的距离是盒子自身的宽高来对比*/
④对行内标签没有效果。
(2)2D旋转

transform: rotate(45deg);

4.三角形制作

div { position: relative; width: 200px; height: 45px; border: 1px solid #000; } div::after{ content: ""; position: absolute; top: 15px; right:15px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 0.5s; } div:hover::after{ transform: translateY(50%) rotate(225deg); }

5. 转换中心点

transform-origin: x y ; //(默认为50% 50%---相当于 center center)

可以跟方位名词: 如transform-origin: left bottom ; 也可以跟像素
6.缩放（scale）

transform: scale(x,y); //可以用transform-origin设置中心点 注意:transform:scare(1,1); //宽和高都放大一倍，相当于没有放大 transform:scare(2,2); //宽和高都放大2倍 transform:scare(2); //只写一个参数，第二个参数默认和第一个一样 transform:scare(0.5,0.5)；//缩小

scale优势就是可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子。
7.倾斜（skew）

transform: skew(0deg,0deg);

8.transform连写
【css|HTML及CSS复习2 关于动画】transform:translate() rotate() scale() skew();
9.动画 （animation）

1. @keyframes 动画名 { 0% || from{/*开始*/ width:100px; } 100% || to{/*结尾*/ width:200px; } }

   
   
2. 调用动画

   div{ width:200px; height:200px background-color:aqua; /*浅绿色*/ margin:100px auto; /*调用动画*/ animation-name: 动画名称; /*持续时间*/ animation-duration:持续时间; }

   
   能通过百分比控制时间长短,在动画的各个环节，如果没有涉及到属性，那么都会直接取默认值 1。
   
3. 其他
   

   animation-timing-function:ease(默认，动画以低速开始，然后加快，结束前有变慢) | step(5) | linear(匀速) | ease-in(以低俗开始) | ease-out(以低速结束) | ease-in-out(以低速开始和结束); 运动曲线，linear(匀速) animation-delay:0; /*何时开始*/ animation-iteration-count: 1; /*动画被播放次数,还有infinite(无限)*/ animation-direction:normal; /*是否反向播放，alternate(逆播放)*/ animation-play-state:running; /*是否正在运行或暂停,paused(暂停)*/ animation-fill-mode:backwards; /*动画结束后状态,停留在结束状态forwards*/

   
   

10.3D转换
近大远小，物体后面遮挡不可见，从屏幕到你现在脸的方向为正值

1. 3D位移：translate3d(x,y,z); 注意:①translateZ一般用px为单位,很少用其他单位；
   ②xyz是不能省略的，如果没有就写0。
2. 透视(perspective):透视的单位是像素，透视写在被观察元素的父盒子上,Z轴越大(正值)物体越大，d视距就是一个人眼睛到屏幕距离。
3. 3D旋转：rotateX(45deg) rotateY(45deg) rotateZ(45deg)
   rotate3d(x,y,z,deg);
4. 3D呈现：transform-style:flat(不开启3D立体空间，默认) | preserve-3d(子元素开启立体空间); /*写在父级盒子*/

11.浏览器私有前缀：

• -moz-:代表火狐
• -ms-:代表ie
• -webkit-:代表safari,chrome
• -o-:代表Opera

12.提倡写法

-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;

13.关于hank css
详情见：CSS Hank兼容浏览器的_蜗牛的专栏-CSDN博客
14. SEO
搜索引擎优化，利用搜索引擎规则提高网站在有关搜索引擎内自然排名的方式，目的是对网站进行深度优化。