CSS 3 新特性
transform
1)概览:
常用的四大功能:位移translate;缩放scale;旋转rotate;倾斜skew。
2)translate
常见写法:
- translateX(<length-percentage>) //沿x方向移动一定的距离
- translateY(<length-percentage>) //沿y方向移动一定的距离
- translate(<length-percentage>,<length-percentage>?) //沿x,y方向分别移动一定距离
- translateZ(<length-percentage>),父容器perspective:xxxpx //沿z方向移动一定的距离(在perspective的位置看,垂直于显示器平面)
- translate3d(x,y,z)
经验:
- 绝对居中:父元素声明
position:relative
且子元素声明position:absolute
以后,在子元素中声明top:50% left:50% transform:translate(-50%,-50%)
;
- 绝对居中:父元素声明
3)scale
常见写法:
- scaleX(<number>) //x方向缩放一定倍数
- scaleY(<number>) //y方向缩放一定倍数
- scale(<number>,<number>?) //整体缩放一定倍数
- 经验:使用较少,因为容易出现图片的模糊
4)rotate
常见写法
- rotate([<angle>|<zero>]); //等价于rotateZ([<angle>|<zero>]),沿z轴旋转一定角度
- rotateZ([<angle>|<zero>]); //沿z轴旋转一定角度
- rotateX([<angle>|<zero>]); //沿x轴旋转一定角度
- rotateY([<angle>|<zero>]); //沿y轴旋转一定角度
经验:
- 一般用于制作360度旋转的loading(载入)图形
- 现用现查rotate的文档即可
5)skew
常见写法
- skewX([<angle>|<zero>]); //
- skewY([<angle>|<zero>]); //沿z轴旋转一定角度
- skew([<angle>|<zero>],[<angle>|<zero>]?); //沿x轴旋转一定角度
- 效果图
→→→
经验:
- 用的较少
- 用到时再搜skew MDN文档
6)组合使用
- transform:scale(0.5) translate(-100%, -100%);
- transform:none; //取消所有
transition
1)语法:
- transition: 属性名 时长 过渡方式 延迟
- 可以用逗号分隔两个不同属性,例如:transition:left 1s, top 4s;
- 可以用all代表所有属性,例如: transition: all 1s;
- 常用过渡方式:linear | ease | ease-out | ease-in | ease-in-out
时间参数个数情况:
- 0个:无效
- 1个:时长
- 2个:按先后顺序依次赋值给 时长 和 延迟
2)特别注意:并非所有属性都能过渡:
- display: none => display:block 无法过渡。一般改用visibility:hidden => visibility: visible
- 背景颜色可以过渡,且是渐变
- 透明度可以过渡,opacity: 1; => opacity: 0.5;
3)过渡必须要有起始!!
animation
1)声明方式:
.某class{
animation: 动画名 时长 过渡方式……
}
@keyframes 动画名{
0%{
//属性例如=> top: 0;
}
100%{
//属性例如=> top: 100px;
}
}
2)语法
属性:animation:时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
- 时长:1s / 1000ms
- 过渡方式:linear / ease (同transition的取值)
- 次数: 3 / 2.4 / infinite(不停循环动画)
- 方向: reverse(反向播放) / alternate (来回播放,即正向反向正向反向,常用)
- 填充模式: none / forwards / backwards / both
- 是否暂停:paused / running (可用于制作停止和继续动画的按钮)
浏览器渲染过程
(一) 步骤
- 根据HTML构建HTML树(DOM)
- 根据css构建css树(CSSOM)
- 将上述两棵树合并成一棵渲染树(render tree)
- Layout(布局):处理文档流,盒模型,计算大小和位置
- Paint(绘制):把边框颜色,文字颜色,阴影绘制出来
- Compse(合成):根据层叠关系展示渲染完成的画面
(二)更新样式
一般我们使用js来更新样式
- 方式一:JS → style → 布局 → 绘制 →合成,
例如:div.remove
- 方式二:JS → style → 绘制 →合成
例如:改变背景颜色 - 方式三:JS → style → 合成
例如:改变transform
- 方式一:JS → style → 布局 → 绘制 →合成,
(三)每个属性更新什么流程?
- 在这里可以找到你想要的!https://csstriggers.com/
about position(定位)
1.static(默认):脱离文档流
2.relative(相对定位):不脱离文档流,升起来
使用场景:
- 作位移(很少用)
- 给absolute元素做爸爸
- 配合z-index:管理上下文层叠遮盖
3.absolute(绝对定位):脱离文档流,升起来
使用场景
- 脱离文档流,相对于relative爸爸定位
- 鼠标提示:悬浮在上方,鼠标经过出现,鼠标离开消失
- 配合z-index
经验:
1. absolute元素是相对于祖先元素中距离自身最近的元素定位的 2. 某些浏览器不写top,left会位置错乱 3. 善用100%
4.fixed:固定定位,相对于视口定位
使用场景
- 广告窗口
- 回到顶部的按钮
配合z-index
- 经验:手机上尽量不要用fixed的,问题很多
5.sticky: 从效果上看,Sticky 像是混合体,页面滑动到“临界点”之前表现为 relative, 到达“临界点”时表现为 fixed
使用 CSS Sticky 只需要两个条件:
- position: sticky;
- top: 0; // right/bottom/left 任一有效值,甚至可以为负像素值
- top:0 意思是当元素滑动到距离视口 0px 时再继续滑动,元素吸顶。
- 很有意思的属性,但兼容性很差
总结:定位元素处于层叠上下文的最上层
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。