1 转换
1.1 转换简介
- 转换定义
使元素改变形状、尺寸和位置的效果,可以对元素应用2D或3D转换进行旋转、缩放、移动或倾斜;(改变元素在页面中的位置、大小、角度和形状)
2D转换:使元素在X轴和Y轴平面上变化,改变其形状、尺寸和位置
3D转换:增加z轴的效果,网页中不存在3D,模拟效果 - 转换属性
transform属性向元素应用2D或3D转换,取值:
none:默认值,表示元素不进行转换
transform function:一个或者多个转换函数,以空格分开;Eg. transform:rotate(90deg) scale(0.8); - 转换原点
transform-origin指定元素原点位置,默认原点在元素中心点或者x轴和Y轴的50%处;
transform-origin:数值/百分比/关键字;
一个值表示所有轴的位置;
两个值表示X轴和Y轴;
三个值表示X轴Y轴和Z轴的位置
1.2 2D转换
- 2D位移
translate()方法将元素从其当前位置移动
translate(x)指定元素在x轴上移动位置;
translate(x, y)指定元素在x和y的移动位置
translateX(x)指定X轴位移
translateY(y)指定Y轴位移 - 2D缩放
scale(value)方法用于等比例改变元素的尺寸,默认为1,绝对值大于1放大,小于1缩小;负数表示反转(以原点为中心旋转180deg);
scale(x,y)分别代表x轴和Y轴的缩放比例;
单向缩放函数scaleX()scaleY() - 2D旋转
rotate()方法用于旋转元素,改变元素在页面中的角度
根据原点顺时针旋转给定的角度,负值表示逆时针旋转
旋转原点会影响旋转效果,旋转连同坐标轴一起旋转,会影响之后的位移效果 - 2D倾斜
skew()方法用于倾斜元素,以原点位置围绕X轴和Y轴按照一定角度倾斜,可能会改变元素形状,取值为角度。skew(xdeg)向x轴倾斜,实际改变y轴角度;skew(xdeg, ydeg)
单向倾斜函数:skewX(xdeg)正数表示逆时针方向倾斜,skewY(ydeg)正数表示顺时针方向倾斜
1.3 3D转换
- perspective属性
属性定义3D元素距视图的距离,单位px;只影响3D转换元素,子元素获得透视效果而不是定义的元素本身。
浏览器兼容性:Chrome和Safari支持-webkit-perspective - 3D位移
改变元素在Z轴的位置,主要包含translateZ(z),translate(x, y ,z) - 3D旋转
rotateX(deg)以X轴为中心轴,旋转元素的角度
rotateY(deg)以Y轴为中心轴,旋转元素的角度
rotateZ(deg)以Z轴为中心轴,旋转元素的角度
rotate3d(x, y, z, deg)xyz为0表示不参与旋转 - 3D缩放
scaleZ(z)
scale3d(x, y, z)
2 过渡
2.1 过渡概述
- 过渡定义
使CSS属性值在一段时间内平滑过渡
transition: background 3s linear 1s; - 触发过渡
过渡由用户行为(点击、悬浮等)触发;
由元素的状态变化触发;
由JavaScript代码触发
2.2 过渡属性
过渡属性写在元素声明的样式中有去有回;写在触发的操作(:hover等)中有去无回
- 过渡属性transition-property
属性规定应用过渡效果的CSS属性名称;
transition-property:none/all/property;
all表示所有可过渡的属性都使用过渡效果
可以设置过渡的属性:
1)颜色属性
2)取值为数值的属性
3)转换属性
4)渐变属性
5)阴影属性
6)visibility属性 - 过渡时间transition-duration
过渡的持续时长,以s/ms为单位的数字,默认值为0; - 过渡函数transition-timing-function
过渡时间曲线函数,取值:
linear匀速
ease默认值,逐渐慢下来
ease-in慢 加速
ease-out快 减速
ease-in-out加速减速 - 过渡延迟transition-delay
规定过渡效果在元素属性值改变后多久开始执行过渡效果(s/ms) - 简写属性transition
用于设置四个过渡属性
transition: property duration timing-function delay;最少也要包含duration属性 - 多过渡效果
设置多个过渡子属性,不同属性值之间用逗号隔开
3 动画
3.1 动画概述
-
动画定义
过渡属性只能模拟动画效果,animation属性可以通过关键帧控制每一步动画,使元素逐渐变化为另一种样式,实现复杂的动画效果(相当于将多个过渡效果放一起使用)
关键帧:1.动画的执行时间点;2.该时间点上的样式;
浏览器兼容性:
Chrome和Safari需要前缀-webkit-;
Firefox需要前缀-moz-
Opera需要前缀-o- -
步骤
1)声明动画:创建一个已命名的动画,使用@keyframes声明动画关键帧@keyframes 动画名称{ 0%{} 25%{} ... 100%{} }
- @keyframes作用
声明动画,指定关键帧定义每个时间点上的动作 - @keyframes语法
@-webkit-keyframes name
@-moz-keyframes name
@-o-keyframes name
from可表示0%,to可表示100%,中间percent
2)使用animation属性调用动画,设置动画播放时间、播放次数等
- @keyframes作用
3.2 动画属性
- 动画子属性
- animation-name:调用动画,规定需要绑定到选择器的keyframe的名称
- animation-duration:动画完成一个周期需要的时间,取值为数值,单位s/ms
- animation-timing-function:规定动画的速度曲线,取值为预定义函数——linear、ease、ease-in、ease-out、ease-in-out;也可以为贝塞尔曲线
- animation-delay:播放之前的延迟时间,取值为数值,单位s/ms
- animation-iteration-count:播放次数,取值数值或者infinite无限播放
- animation-direction:动画播放方向,默认取值normal,reverse逆向播放,alternate轮流播放,即奇数次正常播放,偶数次向前播放
- animation属性
用于控制动画,调用@keyframes定义的动画并设置属性:
animation: name duration timing-function delay iteration-count direction - animation-fill-mode属性
规定动画在播放之前或之后的动画效果是否可见,取值:
none不改变默认行为
forwards动画完成后保持最后一个关键帧
backwards动画播放前在延迟时间内保持第一个关键帧
both同时应用forwards和backwards - animation-play-state属性
规定动画正在运行还是暂停,结合JavaScript代码实现暂停播放,可取值paused和running - 动画与过渡
过渡用于制作简单的动画,动画制作复杂的动画,且控制更精确;
animation和transition大部分属性相同,都是随时间改变元素的属性值,主要区别在于transition需要触发事件才能改变属性,而animation不需要触发的情况就能随着时间发生属性的变化;transition只有两帧,而animation可以有多个帧
4 CSS优化
- CSS优化概述
减轻服务器压力,缩短服务器响应时间,提高用户的体验 - CSS优化原则
1)尽量减少HTTP请求个数:CSS sprites合并多个背景图像到一个图像,通过background-image和background-position进行调整;Images maps结合多个图像到一个图像,总体规模大致相当,但减少HTTP请求的数量能加快页面显示的速度;
2)页面顶部引入css文件:样式表放在头部,允许页面逐步呈现,可以提高页面加载速度;
3)把CSS文件和JS文件放到外部独立的文件中:页面引入外部文件将由浏览器缓存,后续页会使用缓存 - CSS代码优化
1)合并样式:利用CSS继承,提前定义统一的样式,使用群组;
2)缩小样式文件:使用简写属性
3)选择更优的样式属性值
4)减少样式重写
5)代码压缩:使用yuicompressor工具压缩CSS代码
6)不在HTML中缩放图像,图像在网络传输中保持原来图像字节数
7)避免空的src和href=""
https://www.cnblogs.com/shenxiaolin/p/5390237.html
https://www.cnblogs.com/sysg/p/6553975.html