文章目录
属性选择器
类选择器、属性选择器、伪类选择器权重都为10!
书写示例:
结构伪类选择器
nth-child(n)选择父元素里面的第n个孩子,它不管里面的孩子是否是同一个类型;nth-of-type(n) 会选择指定类型的(即当子元素类型相同时可以使用nth-child(n),子元素类型相同时可以使用nth-of-type(n) )。
伪元素选择器
注意:伪类选择器权重为10,伪元素选择器权重是1;伪元素选择器和标签选择器权重都为1。
2D转换
移动translate
最大优点:不会影响其他元素的位置!
此时的x,y伪正值!以向右为x轴正方向,以向下为y轴正方向
注意:以前所见到的 % 都是相对于父元素,而此处相对于元素本身。
子元素在父元素中居中显示
以前的做法:
现在所做改动:
旋转rotate
应用:字体图标箭头
效果:
转换中心点transform-origin
转换中心点默认为元素中心。
x y指定为方位名词时一般是指以盒子的某个角为中心点。
缩放scale
以前:直接对元素修改宽高,元素的上边固定不动,宽高会向左/右/下移动,且会影响下面的元素位置;
使用scale时:默认缩放中心点为盒子中心,缩放时向四周进行,缩放中心点可以自行设置;缩放时也不会影响其他元素。
转换复合写法
先写位移!
动画
使用方式
1.用keyframes定义动画(类似定义类选择器)
2.元素使用动画
动画序列
多个节点的设置:
百分比就是为动画时间的分隔。
常见属性
注意:持续时间一定是在何时开始之前的。
前两个属性必写!默认属性可以直接省略。
速度曲线 值之steps步长
一个元素可以设置多个动画,中间需要使用 ,隔开。
3D转换
特点
重点掌握三维坐标系中坐标轴的方向!
3D移动translate3d
z轴正方向面向人眼!
x,y,z是不能省略的,若果没有就写0。
3D转换–透视perspective
perspective的值指的是观察物体的距离。
translateZ与perspective区别
当一个元素中含有多个孩子时,前者可以分别对每个孩子设置,从而实现不同的效果;而后者只能对付元素进行设置,子元素都会呈现相同的效果。
例如:
3D旋转rotated3d
元素旋转方向判断
X轴:向屏幕外旋转是正值;
Y轴:
Z轴旋转与2D旋转方向、效果一样。
复合写法(简单了解)
3D呈现transform-style
私有浏览器前缀