CSS3常用知识点

1、平面转换（transform）

简介：使用transform属性可以实现元素在平面的位移、旋转、缩放等效果

1.1、位移

语法：transform: translate(水平移动距离, 垂直移动距离)

取值：

• 像素单位数值
• 百分比（参照物为盒子本身）

技巧：

• translate()如果只写一个值，表示x轴方向的移动距离
• 单独设置某个方向的移动距离：translateX() & translateY()

注意：X轴正向为右，Y轴正向为下

作用：配合子绝父相快速实现元素水平垂直居中效果

1.2、旋转

语法：transform: rotate(数字+deg)

取值：

• 取值为正，则顺时针旋转
• 取值为负，则逆时针旋转

1.3、缩放

语法：transform: scale(x轴缩放倍数, y轴缩放倍数)

取值：

• transform: scale(缩放倍数)
• scale值大于1表示放大，小于1表示缩小

注意：一般情况下只为scale设置一个值，表示x轴和y轴等比例缩放

1.4、转换原点

语法：

• transform-origin: 原点水平位置 原点垂直距离
• 默认原点是盒子的中心点

取值：

• 方位名词（left、top、right、bottom、center）
• 像素单位数值
• 百分比（参照盒子自身尺寸计算）

2、渐变

语法：background-image: linear-gradient(颜色1, 颜色2, 颜色…)

注意：

• 渐变是多个颜色逐渐变化的视觉效果
• 一般用于设置盒子的背景

3、空间转换（transform）

简介：

1. 使用transform属性可以实现元素在空间内的位移、旋转、缩放等效果
2. 空间是从坐标轴角度定义的。x、y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
3. 空间转换也叫3D转换

3.1、空间位移

语法：

• transfrom: translate3d(x, y, z);
• transfrom: translateX(值);
• transfrom: translateY(值);
• transfrom: translateZ(值);

取值：

• 像素单位数值
• 百分比（参照物为盒子本身）

注意：

1. 想看到translateZ()的效果需要给父元素添加perspective属性实现透视效果
2. perspective为元素添加近大远小、近实远虚的视觉效果
3. perspective的透视距离一般在800 - 1200左右
4. 透视距离也称为视距，所谓的视距就是眼睛到屏幕的距离

3.2、空间旋转

语法：

• transfrom: rotate3d(x, y, z);
• transfrom: rotateX(值);
• transfrom: rotateY(值);
• transfrom: rotateZ(值);

注意：

1. 呈现立体图形需要给父元素添加属性transform-style: preserve-3d;
2. 添加该属性可以使子元素处于真正的3d空间

左手法则：

• 左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

3.3、空间缩放

语法：

• transfrom: scale3d(x, y, z);
• transfrom: scaleX(倍数);
• transfrom: scaleY(倍数);
• transfrom: scaleZ(倍数);

3.4、过渡

语法：transition: property duration timing-function delay;

属性值	描述
transition-property	指定CSS属性的name, 过渡效果
transition-duration	过渡效果需要花费多少秒才能完成
transition-timing-function	指定过渡效果的速度曲线
transition-delay	过渡效果延迟时间

3.4.1 transition-property属性

语法：transition-property: none|all|property;

属性值	描述
none	没有属性会获得过渡效果
all	所有属性都将获得过渡效果
property	定义应用过渡效果的CSS属性名称列表，列表以逗号隔开

3.4.2 transition-duration属性

语法：transition-duration: time;

属性值	描述
time	规定完成过渡效果需要花费的时间

3.4.3 transition-timing-function属性

语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值	描述
linear	规定以相同速度开始至结束的过渡效果。等同于：cubic-bezier(0, 0, 1, 1)
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果。等同于：cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in	规定以慢速开始的过渡效果。等同于：cubic-bezier(0.42, 0, 1, 1)
ease-out	规定以慢速结束的过渡效果。等同于：cubic-bezier(0, 0, 0.58, 1)
ease-in-out	规定以慢速开始和结束的过渡效果。等同于：cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(n,n,n,n)	在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值

3.4.4 transition-delay属性

语法：transition-delay: time;

属性值	描述
time	过渡效果延迟时间

4、动画

简介：

• 动画可以实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
• 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
• 构成动画的最小单元：帧或动画帧

4.1、实现动画步骤

4.1.1 定义动画

@keyframes 动画名称 {
  from {}
  to {}
}

@keyframes 动画名称 {
  0% {}
  25% {}
  50% {}
  75% {}
  100% {}
}

4.1.2 使用动画

• animation: 动画名称 动画时长;

4.1.3 动画属性

• animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

注意：

• 动画名称和动画时长必须赋值
• 取值不分先后顺序
• 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

属性	作用	取值
animation-name	动画名称	name
animation-duration	动画时长	数字+s
animation-time-function	速度曲线	liear（匀速）、ease（慢、快、慢）、ease-in（慢开始）、ease-out（慢结束）、ease-in-out（慢、快、慢）、steps(数字)：逐帧动画
animation-delay	延迟时间	数字+s
animation-iteration-count	延迟时间	数字、infinite为无限循环
animation-direction	动画方向	normal（默认值）、reverse（反）、alternate（奇数正，偶数反）、alternate-reverse（奇数反，偶数正）
animation-fill-mode	执行完毕时状态	forwards（最后一帧状态）、backwards：（第一帧状态）
animation-play-state	暂定动画	paused（暂停）、running（运行）

5、flex布局

5.1、flex布局基本概念

• Flexible Box模型，通常被称为flexbox，是一种一维的布局模型。他给flexbox的子元素之间提供了强大的空间分布和对齐能力。
• flexbox一次只能处理一个维度上的元素布局，一行或者一列。

5.2、flexbox的两根轴线

• 当使用flex布局时，首先想到的是两根轴线 - 主轴和交叉轴
• 主轴由 flex-direction定义，另一根垂直于它。
• flex的所有属性都和这两根轴线有关

flex-direction:

属性值	作用
row	默认值，水平排列从左到右
row-reverse	水平排列从右到左
column	垂直排列从上到下
column-reverse	垂直排列从下到上

5.2、flex容器

简介：采用了flexbox的区域就叫做flex容器。为了创建flex容器，我们把一个容器的display属性值改为flex或inline-flex。完成这一步后容器中的直系子元素都会变为flex元素。所有CSS属性都有一个初始值，flex容器中的所有flex元素都有下列特点：

1. 元素排列为一行（flex-direction属性的初始值是row）
2. 元素从主轴的起始线开始
3. 元素不会在主维度方向拉伸，但是可以缩小
4. 元素被拉伸来填充交叉轴的大小
5. flex-basis属性为auto
6. flex-wrap属性为nowrap

5.3、flex属性

5.3.1 flex-wrap属性

语法：flex-wrap: nowrap|wrap|wrap-reverse|;

属性值	描述
nowrap	默认值，flex子元素不换行
wrap	flex子元素可以换行
wrap-reverse	flex子元素可以换行，但是以相反顺序换行

注意：你可以将两个属性flex-direction和flex-wrap组合简写为flex-flow。第一个值为flex-direction，第二个值为flex-wrap。

5.3.2 flex-grow、flex-shrink、flex-basis

• flex-grow: 一个数字，规定元素相对于其他元素进行增加的量
• flex-shrink: 一个数字，规定元素相对于其他元素缩减的量（仅当父元素宽度不够时生效）
• flex-basis: 元素的宽度。默认值为auto

5.3.3 align-items属性

语法：align-items: stretch|center|flex-start|flex-end|baseline;

属性值	描述
stretch	默认值，元素拉伸以适应容器
center	交叉轴的中心点对齐
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
baseline	基线对齐

5.3.4 justify-content属性

语法：justify-content: flex-start|flex-end|center|space-around|space-between|space-evenly;

属性值	描述
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	沿主轴均匀排列，空白间距均分在弹性盒子之间
space-evenly	沿主轴均匀排列，弹性盒子与容器之间间距相等