20200818赵鑫

学习总结

转换

透视距离(景深):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中缩放图像

学习心得

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

标签

评论

this is is footer