一、CSS3
CSS3现状
- 在CSS2的基础上新增（扩展）样式
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
二、CSS3选择器
2.1 属性选择器(权重是10）
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button { cursor: pointer; } /* 属性选择器使用方法 */ /*选择的是：既是button又有disabled这个属性的元素*/ button[disabled] { cursor: default; } </style> </head> <body> <button>按钮</button> <button>按钮</button> <button disabled="disabled">按钮</button> <button disabled="disabled">按钮</button> </body>
2.2 结构伪类选择器（权重10）
ul li:first-child { background-color: lightseagreen; } ul li:last-child { background-color: lightcoral; } ul li:nth-child(3) { background-color: aqua; }
nth-child 详解
- 注意：本质上就是选中第几个子元素
- n 可以是数字、关键字、公式
- n 如果是数字，就是选中第几个
- 常见的关键字有 `even` 偶数、`odd` 奇数
- 常见的公式如下(如果 n 是公式，则从 0 开始计算)
- 但是第 0 个元素或者超出了元素的个数会被忽略
<style> /* 偶数 */ ul li:nth-child(even) { background-color: aquamarine; } /* 奇数 */ ul li:nth-child(odd) { background-color: blueviolet; } /*n 是公式，从 0 开始计算 */ ul li:nth-child(n) { background-color: lightcoral; } /* 偶数 */ ul li:nth-child(2n) { background-color: lightskyblue; } /* 奇数 */ ul li:nth-child(2n + 1) { background-color: lightsalmon; } /* 选择第 0 5 10 15, 应该怎么选 */ ul li:nth-child(5n) { background-color: orangered; } /* n + 5 就是从第5个开始往后选择 */ ul li:nth-child(n + 5) { background-color: peru; } /* -n + 5 前五个 */ ul li:nth-child(-n + 5) { background-color: tan; } </style>
`nth-child` 和 `nt-of-type` 的区别：
- `nth-child` 选择父元素里面的第几个子元素，不管是第几个类型，选择整个父元素里面的第几个孩子
- `nt-of-type` 选择指定类型的元素，选择某个特定标签类型里面的第几个元素
<div> <p>我是p</p> <span>我是span</span> <span>我是span</span> <span>我是span</span> </div>
div span:nth-child(1){ background-color: pink; }
上面这个选择器是无法选择出任何元素的，因为这个选择器要求选出标签是span并且是 div(父元素) 的第一个孩子，这里面是没有满足这个两个条件的元素的
div span:nth-of-type(1) { background-color: purple; }
上面这个选择器可以选出第一个sapn元素，他选出的是满足标签是span，并且是从span这个类型的标签里面选择的第一个元素
2.3 伪元素选择器
伪类选择器是一个冒号，伪元素选择器是两个冒号
伪类选择器注意事项
- `before` 和 `after` 必须有 `content` 属性
- `before` 在内容前面，after 在内容后面
- `before` 和 `after` 创建的是一个元素，但是属于行内元素
- 创建出来的元素在 `Dom` 中查找不到，所以称为伪元素
- 伪元素和标签选择器一样，权重为 1
伪元素字体图标
span { font-family: 'icomoon'; position: absolute; top: 10px; right: 10px; } div, p { position: relative; width: 249px; height: 35px; border: 1px solid red; } p::after { content: "ea50"; position: absolute; top: 10px; right: 10px; font-family: 'icommon'; }
<div> <span></span> </div> <p></p>
上述代码的作用是，直接使用伪元素选择器在p标签里面创建了一个字体图标，不用像第一种方式创建一个div，里面再放一个span
此外使用字体图标的方式有两种：
一是复制里面的小图标放在标签里面
而是使用前面的代码放到伪元素里面的content中，注意前面要加上转义符
三、2D转换
转换（transform）是CSS3中最具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放效果
转换（transform）：
- 移动：translate
- 旋转：rotate
- 缩放：scale
3.1 二维坐标系
3.2 移动translate
改变元素在页面中的位置，类似定位
3.2.1 语法
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
移动盒子的位置的方式：
- 定位
- 盒子的外边距
- 2d转换移动
3.2.2 重点
-`2D` 的移动主要是指 水平、垂直方向上的移动
- `translate` 最大的优点就是不影响其他元素的位置（这是定位和外边距不能实现的）
- `translate` 中的100%单位，是相对于盒子本身的宽度和高度来进行计算的
- 行内标签没有效果
让盒子水平垂直居中
div { position: relative; width: 500px; height: 500px; background-color: pink; } p { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background-color: purple; transform: translate(-50%, -50%); }
<div>
<p></p>
</div>
/*盒子往上走自己高度的一半，往左走盒子宽度的一半*/ transform: translate(-50%, -50%);
3.3 旋转rotate
3.3.1 语法
transform:rotate(度数）
transform:rotate(45deg) //角度为正值顺时针旋转，为负值时逆时针旋转
3.3.2 三角
以前是通过字体图标的方式放一个下三角，现在通过旋转的属性实现
<div></div>
div { position: relative; width: 249px; height: 35px; border: 1px solid #000; } div::after { content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; /* 给出一个右边框和一个下边框，再旋转45度即可 */ border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all .2s; } /* 鼠标经过div，里面的after伪元素进行旋转 */ div:hover::after { transform: rotate(225deg); }
3.3.3 设置元素旋转中心点(transform-origin)
transform-origin: x y;
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 `center` `center`
- 还可以给 x y 设置像素或者方位名词(`top`、`bottom`、`left`、`right`、`center`)
3.4 缩放scale
transform:scale(x,y);
- 注意，x 与 y 之间使用逗号进行分隔
- `transform: scale(1, 1)`: 宽高都放大一倍，相当于没有放大
- `transform: scale(2, 2)`: 宽和高都放大了二倍
- `transform: scale(2)`: 如果只写了一个参数，第二个参数就和第一个参数一致
- `transform:scale(0.5, 0.5)`: 缩小
- `scale` 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
3.4.1 图片放大案例
<div><a href=""></a><img src="media/scale.jpg" alt=""></div> <div><a href=""></a><img src="media/scale.jpg" alt=""></div> <div><a href=""></a><img src="media/scale.jpg" alt=""></div>
div { overflow: hidden; float: left; margin: 10px; } div img { transition: all .4s; } div img:hover { transform: scale(1.1); }
3.4.2 分页按钮案例
实现鼠标放在页码上，页码放大
<head> <meta charset="UTF-8"> <title>Document</title> <style> li { float: left; width: 30px; height: 30px; border: 1px solid pink; margin: 10px; text-align: center; line-height: 30px; list-style: none; border-radius: 50%; cursor: pointer; transition: all .4s; } li:hover { transform: scale(1.2); } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body>
3.5 2D转换综合写法
1. 知识要点
- 同时使用多个转换，其格式为 `transform: translate() rotate() scale()`
- 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 但我们同时有位置或者其他属性的时候，要将位移放到最前面
div:hover { transform: translate(200px, 0) rotate(360deg) scale(1.2) }
四、动画
4.1 什么是动画
动画是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
4.2 动画的基本使用
- 先定义动画
- 在调用定义好的动画
4.3 语法格式(定义动画)
@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } }
4.4 语法格式(使用动画)
div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间； }
4.5 动画序列
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%
百分比是时间的划分，比如总时间为10s，25%就是2.5s
4.6 动画属性
简写形式：
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */ animation: name duration timing-function delay iteration-count direction fill-mode
- 简写属性里面不包含 `animation-paly-state`
- 暂停动画 `animation-paly-state: paused`; 经常和鼠标经过等其他配合使用
- 要想动画走回来，而不是直接调回来：`animation-direction: alternate`
- 盒子动画结束后，停在结束位置：`animation-fill-mode: forwards`
4.7 速度曲线细节
animation-timing-function: 规定动画的速度曲线，默认是`ease`
奔跑的熊大
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #ccc; } div { position: absolute; width: 200px; height: 100px; background: url(media/bear.png) no-repeat; /* 元素可以添加多个动画 用逗号分割 */ animation: bear 1s steps(8) infinite, move 3s forwards; } @keyframes bear { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } @keyframes move { 0% { left: 0; } 100% { left: 50%; transform: translate(-50%); } } </style> </head> <body> <div></div> </body> </html>
元素可以添加多个动画，用逗号隔开即可
五、3D转换
5.1 3D移动 translate3d
- `3D` 移动就是在 `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 进行填充**
5.2 透视perspective
- 如果想要网页产生 `3D` 效果需要透视(理解成 `3D` 物体投影的 `2D` 平面上)
- 实际上模仿人类的视觉位置，可视为安排一直眼睛去看
- 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
- **透视需要写在被视察元素的父盒子上面**
- d：就是视距，视距就是指人的眼睛到屏幕的距离
- z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大
body { perspective: 1000px; }
5.3 translatez
1. `translateZ` 与 `perspecitve` 的区别
- `perspecitve` 给父级进行设置，`translateZ` 给 子元素进行设置不同的大小
5.4 3D旋转 rotate3d
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
5.5 3D呈现 transform-style
1. `transform-style`
- ☆☆☆☆☆
- 控制子元素是否开启三维立体环境
- `transform-style: flat` 代表子元素不开启 `3D` 立体空间，默认的
- `transform-style: preserve-3d` 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
5.6 案例
3D导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { margin: 100px; } ul li { width: 120px; height: 35px; list-style: none; /* 之后需要给box也添加透视，因此没有把这个透视属性加在box上面，反而加在了li上 */ perspective: 500px; } .box { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all .5s; } .box:hover { transform: rotateX(90deg); } .front, .bottom { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .front { background-color: pink; z-index: 1; /* 我们先把紫色盒子沿着x轴旋转90度， 之后并没有把紫色盒子向后移动宽度的一半，而是把粉色盒子向前移动了宽度的一半 */ /* 这样才能让整个盒子立方体沿着中心点旋转，否则盒子将会沿着 */ transform: translateZ(17.5px); } .bottom { background-color: purple; /* 必须先写移动 */ transform: translateY(17.5px) rotateX(-90deg); } </style> </head> <body> <ul> <li> <div class="box"> <div class="front">哼唧哼唧</div> <div class="bottom">哼唧哼唧</div> </div> </li> </ul> </body> </html>
旋转木马
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { perspective: 1000px; } section { position: relative; width: 300px; height: 300px; margin: 150px auto; transform-style: preserve-3d; /* 添加动画效果 */ animation: rotate 6s linear infinite; background: url(media/pig.jpg) no-repeat; } section:hover { /* 鼠标放上去暂停旋转 */ animation-play-state: paused; } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } section div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(media/dog.jpg) no-repeat; } section div:nth-child(1) { transform: translateZ(300px); } section div:nth-child(2) { /* 先旋转好了再移动 */ transform: rotateY(60deg) translateZ(300px); } section div:nth-child(3) { /* 先旋转好了再移动 */ transform: rotateY(120deg) translateZ(300px); } section div:nth-child(4) { /* 先旋转好了再移动 */ transform: rotateY(180deg) translateZ(300px); } section div:nth-child(5) { /* 先旋转好了再移动 */ transform: rotateY(240deg) translateZ(300px); } section div:nth-child(6) { /* 先旋转好了再移动 */ transform: rotateY(300deg) translateZ(300px); } </style> </head> <body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body> </html>
六、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的浏览器，比较新版本的浏览器无需添加
七、背景线性渐变
背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词 或者度数，如果省略默认就是top
