【笔记】css3高级转换、渐变、关键帧动画

摘要

面试题-谈谈如何进行前端优化
1、html优化
2、JavaScript优化
3、css优化
1、尽量减少http请求个数,如把多张小图合并成为一张大图
2、所有外部样式文件放在head(头部)里面
3、除首页外的其他页面尽量使用外部样式文件,被多个页面所共用(将css和js放到外部样式文件中)
4、首页中尽量少使用外部样式文件,全部样式写在页内部
5、样式文件中的内容越少越好,尽可能简写
6、使用压缩工具压缩样式文件,如yui-compressor
7、尽量不要缩放图片
8、避免空的src和href

【笔记】css3高级转换、渐变、关键帧动画

1、css3高级属性-属性
transform:转换。变形
语法;选择器{
transform:none/变形函数
transform-origin:50% 50%;
perspective:视点转换(父容器身上)
}
常用的2d转换函数;(百分号,为自身的百分、不是父容器的)(不会影响任何一个元素)
(1)位移:translate(x)、translate(x,y)无需指定轴点
(2)旋转:rotate(deg)(可以指定轴点)
(3)缩放:scale(x)、scale(x,y)1代表100%(等比缩放)(可以指定轴点)
一个值为等比缩放
两个值为不等比缩放
缩小;0-1为缩放
放大;大于1为放大
(4)倾斜:skew
一个值为x轴
两个值为x,y
可以指定轴点
常用的3d转换函数
注意;所有的3d转换函数都必须要配合“视点”的使用
perspective属性必须放在执行3d转换的元素的父元素身上
单位;px像素指人的眼睛距离屏幕的距离,同一个3d转换,若视点越近,转换效果越夸张
(正常一个一人离屏幕最佳距离是)
3d旋转函数
rotateX(deg)单杠运动 rotateY(deg)钢管舞 rotateZ(deg)

2、css3高级属性-过度/渐变
transition;用户需要指定动画开始和结束两个点的状态
css3自动补全中间缺少的变化过程,如下属性都可以执行渐变动画
如果同时用多个属性需要渐变,用all
颜色属性background-color、color
取值为数值的属性width、opacity
转换属性
渐变属性transform:各种转换函数
visibility属性
阴影属性box-shadow
注意;有些css属性是不能是实现渐变动画的,如字体、背景图片
语法
选择器 {
css属性:值1;
}
选择器{
css属性:值2;
}
transition属性的完整属性;
提示;渐变动画只能提供的开始和结束两个点的状态样式,中间的过程由css补充——如位移;只能做直线位移
3、css高级属性——关键帧(keyframe)动画
关键帧动画;由程序员提供的一个动画过程中的若干个关键点的样式属性,
每相邻的两个点中间的过度效果由css补充—关键帧动画比transition多了若干个关键点
使用方法;
1.使用@keyframes声明动画的关键帧
@keyframes 动画名{0%{} 50%{} 100%{}}
2,在某个选择器中使用指定的关键帧动画
选择器{animation:动画名称 持续时间;}
3、兼容性问题
动画子属性;

1、animation-name 调用动画,名称
2、animation-duration动画完成一个周期的时间
3、animation-timing-function规定动画的速度曲线
4、animation-delay 延迟时间
以下为transition没有的子属性
5、animation-iteration-count播放次数
6、animation-direction动画播放次数(取值为normal(正常,回到原点)/alternate(回放,100%到0%))

*渐变动画(transition)和关键帧动画(keyframes animation)的区别
1、渐变动画简单、只能指定两个关键帧
关键帧动画负责,可以指定多个关键帧
2、渐变动画浏览器支持性好
关键帧动画目前仍需加前缀 -webkit- -moz-
3、渐变动画只能执行一次
关键帧动画可以执行多次,并指定每次的执行方向;
4、面试题-谈谈如何进行前端优化
1、html优化
2、JavaScript优化
3、css优化
1、尽量减少http请求个数,如把多张小图合并成为一张大图
2、所有外部样式文件放在head(头部)里面
3、除首页外的其他页面尽量使用外部样式文件,被多个页面所共用(将css和js放到外部样式文件中)
4、首页中尽量少使用外部样式文件,全部样式写在页内部
5、样式文件中的内容越少越好,尽可能简写
6、使用压缩工具压缩样式文件,如yui-compressor
7、尽量不要缩放图片
8、避免空的src和href

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:33   其中:访客  24   博主  9

  1. avatar 默歌 2

    [生病]看来我有空得向您讨教讨教CSS

  2. avatar 森云 5

    博主是专业前端吗

  3. avatar 森云 5

    都是前端的啊

  4. avatar 森云 5

    我一看我的多说回复,竟然被你霸屏了

  5. avatar 北京装修公司 2

    <a href="http://www.jcsnzs.com/" target="_blank">北京装修公司</a>

  6. avatar 森云 5

    回头准备报个班学习一下css

    • avatar 李东辉博客

      @森云 我这有资料,还有笔记和ppt,你要是需要的话,我到时候发给你

  7. avatar 森云 5

    哈哈,霸屏君又来了