CSS模块学习

大家好，我是阿炫，是《CSS模块学习》的作者，这是一份专注前端学习与面试的开源资料，内容都是整理于我在学习前端过程中的笔记。

简单介绍下《CSS模块学习》，整个内容共有 1w 字 + 36 张图，目的也很简单，想通过「说人话+图解」的方式，击破大家对于「八股文」的恐惧。

1.1伪元素选择器（重点）

利用CSS创建新标签元素----行内元素 在dom树中找不到

：：before  在元素内部前面插入内容

：：after 在元素内部后面插入内容

(opens new window)

伪元素选择器使用场景1：伪元素字体图标

(opens new window)

伪元素选择器使用场景2：仿土豆效果 (opens new window)

伪元素选择器使用场景2：伪元素清除浮动 (opens new window) (opens new window) (opens new window)

2.5 CSS3 盒子模型

(opens new window)

2.6 CSS3其他特性

(opens new window)

CSS calc 函数

(opens new window)

例子：

(opens new window)

CSS3 过渡(重点)

(opens new window)

语法：

transition：要过渡的属性 花费时间 运动曲线 何时开始

(opens new window)

口诀：谁来过渡给谁加

(opens new window)

ppLcYrR.png (opens new window)](https://imgse.com/i/ppLcYrR)

CSS3的2D转换

CSS3的2D转换-----平移

移动盒子的位置：定位、盒子的外边距、2D转换 (opens new window)

transform：最大的优点是不会影响其他元素的位置

transform里面的参数可以为百分比，百分比是相对于自身的宽度/高度来对比的

transform对于行内元素是无效的

实现水平居中，垂直居中的效果

(opens new window)

CSS3的2D转换-----旋转

(opens new window)

设置转换中心点

(opens new window)

CSS3的2D转换-----缩放

(opens new window)

(opens new window)

CSS3中的动画使用

(opens new window)

(opens new window)

(opens new window)

动画序列

(opens new window) (opens new window) (opens new window)

(opens new window)

例子：大数据热点图

(opens new window)

animation-timing-function-----速度曲线细节

(opens new window)

steps就是分几步来完成我们的动画

CSS3的3D转换

(opens new window)

1.1 CSSS3的3D移动

(opens new window)

translateZ：沿着Z轴移动，单位一般是px，正值为往外移动100px

3D移动的简写：

transform：translate3d（100px，100px，100px）

xyz是不能省略的，如果没有就写0

1.2透视 perspective

(opens new window)

1.3 3D旋转

(opens new window) (opens new window)

1.4 3D呈现 transform-style

(opens new window)

2.0 浏览器的私有前缀

(opens new window)