学习总结

转换

透视距离（景深）：perspective,取值是以px为单位的数字

嵌套在3d空间显示:transform-style:flat/preserve-3d

转换原点：transform-origin:

取值，1.以px为单位的数字 2.% 3.关键字x:left/center/right y:top/center/bottom

背向隐藏：backface-visibility:hidden;

过渡

transition属性是谁改变加给谁，不能在加Hover后面，否则就是有去无回

transition-property检索或设置对象中参与过渡的属性

取值:1.all所有支持过渡的属性都参与此次过度。2.支持过度的属性：颜色、多数取值为具体数字的属性、阴影、transform、visibility

transition-duration:检索或设置对象过渡的持续时间

transition-timing-function:检索或设置对象中过渡的动画类型（过渡时间曲线函数）

transition-delay:检索或设置对象延迟过渡的时间

简写：transition:property duration timing-function delay

动画

设置动画执行时间：animation-duration:

设置动画的时间曲线函数：animation-timing-function:linear

linear:匀速运动 ease:默认 动画以低速开始，然后加快，在结束前变慢

ease-in：动画以低俗开始 ease-out:动画以低速结束

ease-in-out:动画以低速开始和结束

cubic-bezier(n,n,n,n)：自定义三次贝塞尔函数的值，n=0~1

设置动画开始的延迟时间：animation-delay:

设置动画的播放次数：animation-iteration-count:infinite(无限次数)/整数次

设置动画的播放顺序：animation-direction:reverse(倒放) alternate(正逆轮流播放)

设置动画在播放之前和播放之后的状态：animation-fill-mode:forwards(动画播放完成后，将动画的最后一帧填充在元素中)backwards(动画播放之间的延迟时间内，将动画的第一帧填充在元素中)both(同时设置backwards和forwards)

鼠标悬停，动画暂停：animation-play-state:paused(暂停)running(不暂停)

动画兼容性：

-webkit-是chrome和Safair -o-是opera

-ms-是IE -moz-是Firefox

简写动画：animation:name duration timing-function delay

count direction

CSS优化

css优化的目的：

1.减少服务器端的压力(负载均衡、并发、抗压测试)

2.缩短服务器响应时间

3.提升用户体验

优化原则：

1.尽量减少http的请求个数

2.将CSS和js文件放到外部独立文件中，在页面的顶部引入css文件

代码优化：

1.合并样式

2.能用群组，就不单写。能简写，就不单独去定义

3.缩小样式文件的大小，能重用就重用

4.减少样式重写

5.避免出现空的href和src

6.代码压缩

7.选择更优的样式属性值

8.不要在HTML中缩放图像

学习心得

今天所学的知识，大部分都用过，但是不够熟悉，记不住，需要加强记忆，都去背一下。