02 css3
# 1. css3选择器 #
## 1.1 css3属性选择器 ##
选择符 简介
E[att] 选择具有att属性的元素
E[att= "val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有at属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元
类选择器、属性选择器、伪类选择器 权重为10
## 1.2 css3结构伪类选择器 ##
用法
选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个
代码演示
/* 只选择第一个子标签元素 */
ul li:first-child {
background-color: pink;
}
/* 匹配最后一个子元素 */
ul li:last-child {
background-color: skyblue;
}
/* 匹配第n个子元素 */
ul li:nth-child(2) {
background-color: black;
}
/* 匹配偶数元素 */
/* n可以是关键词 even是偶数 odd基数*/
ul li:nth-child(even) {
background-color: aqua;
}
/* n可以是公式，但是n从0开始计算 */
ul li:nth-child(2n+1) {
background-color: yellowgreen;
}
/* of - type 指定类型的元素 */
ul span:first-of-type {
background-color: violet;
}
ul span:last-of-type {
background-color: violet;
}
ul span:nth-child(2n) {
background-color: gold;
}
nth-child:
- 但是第 0 个元素或者超出了元素的个数会被忽略
- 选择父元素里面的第几个子元素，不管是第几个类型
- 本质上就是选中第几个子元素
## 1.3伪元素选择器 ##
选择符 介绍
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
必须都有content属性
before 和 after 创建一个元素，但是属于行内元素，行内元素无大小
伪元素和标签选择器一样，权重为1
# 2. 2D转换 ##
## 2.1 二维坐标系 ##
x轴 水平向右
y轴 垂直向下
1. `2D` 转换
- `2D` 转换是改变标签在二维平面上的位置和形状
- 移动： `translate`
- 旋转： `rotate`
- 缩放： `scale`
2. `translate` 语法
- x 就是 x 轴上水平移动
- y 就是 y 轴上水平移动
css
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
重点
- 沿着xy轴移动元素
- translate最大的优点：不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素translate:(50%,50%);
- 对行内标签没有效果
## 2.3 2D旋转 ##
1. rotate 旋转
- `2D` 旋转指的是让元素在二维平面内顺时针或者逆时针旋转
2. `rotate` 语法
```css
/* 单位是：deg */
transform: rotate(度数)
```
3. 重点知识点
- `rotate` 里面跟度数，单位是 `deg`
- 角度为正时，顺时针，角度为负时，逆时针
- 默认旋转的中心点是元素的中心点
4. 代码演示
```css
img:hover {
transform: rotate(360deg)
}
```
设置旋转中心点
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/* 跟方位名词
也可以是百分比 默认是50% 50% 等价于center center */
/* transform-origin: left bottom;*/
/* 可以是px */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
## 2.4 2D转换之缩放scale ##
1. `scale` 的作用
- 用来控制元素的放大与缩小
2. 语法
```css
transform: scale(x, y)
```
3. 知识要点
- 注意，x 与 y 之间使用逗号进行分隔
- `transform: scale(1, 1)`: 宽高都放大一倍，相当于没有放大
- `transform: scale(2, 2)`: 宽和高都放大了二倍
- `transform: scale(2)`: 如果只写了一个参数，第二个参数就和第一个参数一致
- `transform:scale(0.5, 0.5)`: 缩小
- `scale` 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
4. 代码演示
```css
div:hover {
/* 注意，数字是倍数的含义，所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等比缩放，同时修改宽与高 */
/* transform: scale(2) */
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
```
## 2.5 2D转换综合写法 ##
1. 知识要点
- 同时使用多个转换，其格式为 `transform: translate() rotate() scale()`
- 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 但我们同时有位置或者其他属性的时候，要将位移放到最前面
css
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .5s;
}
div:hover {
/* 顺序影响效果 */
transform: translate(50px, 50px) rotate(180deg) scale(1.2);
}
# 3.动画 #
## 3.1 动画基本使用 ##
1. 什么是动画
- 动画是 `CSS3` 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
2. 动画的基本使用
- 先定义动画
- 在调用定义好的动画
3. 语法格式(定义动画)
```css
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
```
4. 语法格式(使用动画)
```
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
```
5. 动画序列
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%
6. 代码演示
css
<style> div { width: 100px; height: 100px; background-color: aquamarine; animation-name: move; animation-duration: 0.5s; } @keyframes move{ 0% { transform: translate(0px) } 100% { transform: translate(500px, 0) } } </style>
## 3.2 动画序列 ##
根据节点（实际动画完成这步所需时间）来设置 动画使用顺序
如 25% 50% 75%等
## 3.3 动画常用属性 ##
属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了animation-play-state属性。
animation-name 规定@keyframes动画的名称。( 必须的)
animation-duration 规定动画完成一个周期所花费的秒或毫秒 ,默认是0。 (必须的 )
animation-timing-function 规定动画的速度曲线，默认是"ease"
animation-delay 规定动画何时开始，默认是0。animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite
animation-direction 规定动画是否在下一-周期逆向播放，默认是"normal ",alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是"running" ，还有"pause"。
animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards
/* 简写属性 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始和结束 */
animation: move 3s ease-in 1s infinite alternate forwards;
简写属性里不包含 animation-play-state
暂停动画 ：animation-play-state:paused; 和鼠标经过和其他配合使用
想要动画走回来而不是调回来 animation-direction ：alternate
值 描述
linear 动画从头到尾的速度是相同的。匀速
ease 默认。动画以低速开始，然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps() (指定了时间函数中的间隔数量(步长)
# 3. 3D转换 #
## 3.1 三维坐标系 ##
- x轴：水平向右 右边正值
- y轴：垂直向下 下面正值
- z轴：垂直屏幕 往外面是正值
## 3.2 3D位移 translate3d(x,y,z) ##
比2D移动多了一个可以移动的反向
就是 z 轴方向
- `transform: translateX(100px)`：仅仅是在 x 轴上移动
- `transform: translateY(100px)`：仅仅是在 y 轴上移动
- `transform: translateZ(100px)`：仅仅是在 z 轴上移动
- `transform: translate3d(x, y, z)`：其中x、y、z 分别指要移动的轴的方向的距离
- **注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充**
css
div {
width: 200px;
height: 200px;
background-color: pink;
/* transform: translateX(100px); */
/* transform: translateY(100px); */
/* 沿着z轴移动 后边单位一般都px translateZ(100px) 向外移动100px*/
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
/* 简写 xyz不能省略 没有就写0*/
transform: translate3d(100px, 100px, 100px);
}
## 3.3 透视 perspective ##
透视写在被观察元素的父盒子上
距离视觉点越近的电脑平面成像越大，越远成像越小
- d：就是视距，视距就是指人的眼睛到屏幕的距离
- z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大
## 3.4 旋转 rotate3d ##
3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
1. 语法
- `transform: rotateX(45deg)` -- 沿着 x 轴正方向旋转 45 度
- `transform: rotateY(45deg)` -- 沿着 y 轴正方向旋转 45 度
- `transform: rotateZ(45deg)` -- 沿着 z 轴正方向旋转 45 度
- `transform: rotate3d(x, y, z, 45deg)` -- 沿着自定义轴旋转 45 deg 为角度
rotate3d
- `transform: rotate3d(x, y, z, deg)` -- 沿着自定义轴旋转 deg 为角度
- x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
- `transform: rotate3d(1, 1, 0, 180deg)` -- 沿着对角线旋转 45deg
- `transform: rotate3d(1, 0, 0, 180deg)` -- 沿着 x 轴旋转 45deg
transform-style
- 控制子元素是否开启三维立体环境
- `transform-style: flat` 代表子元素不开启 `3D` 立体空间，默认的
- `transform-style: preserve-3d` 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
