CSS3新增的主要内容：
- 新的选择器：
- 属性选择器
- 结构伪类选择器：
nth-child(n) - 伪元素选择器：
::before，::after
- 转换transform
- 2D转换
- 3D转换
- 动画animation
- 浏览器私有前缀
- 多列布局
flex布局
参见
https://www.bilibili.com/video/BV1Rv4y177rj
传统布局与flex布局
- 传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能在移动端很好地布局
- flex 弹性布局
- 操作方便，布局极为简单，移动端应用很广泛
- PC 端浏览器支持情况不如移动端
flex 布局的基本概念
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。
在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。
特点：
- 一维布局
- 任何一个容器都可以指定为 flex 布局
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- 这些叫法是一个意思，伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
当使用 flex 布局时，首先想到的是两根轴线 — 主轴(Main Axis)和交叉轴(Cross Axis)。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关,flex 主要用这两个轴来控制布局
例如
上图说明如下：
- main axis 是主轴，该轴的开始为 main start，结束为 main end。
- cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
- flex item 是 flex 容器中的元素。
在这个弹性盒子中，提供了一些属性来操作这些元素
Flex 容器
文档中采用了 flexbox 的区域就叫做 flex 容器。指定一个容器的属性为display: flex | inline-flex即创建了一个flex 容器。完成这一步之后，容器中的直系子元素就会变为 flex 元素（flex item）。所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：
- 元素排列为一行 (flex-direction 属性的初始值是 row)。
- 元素从主轴的起始线开始。
- 元素不会在主维度方向拉伸，但是可以缩小。
- 元素被拉伸来填充交叉轴大小。
- flex-basis 属性为 auto。
- flex-wrap 属性为 nowrap。
这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。
flex 布局父项常见属性
常见父项属性
以下有6个属性是对父元素设置的
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-items：设置侧轴上的子元素排列方式（单行）
- align-content：设置侧轴上的子元素的排列方式（多行）
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-direction
该属性指定了弹性子元素在父容器中的排列方向和顺序。
其语法格式为：
flex-direction: row | row-reverse | column | column-reverse;
| 属性值 | 描述 |
|---|---|
| row | 横向从左到右排列，默认的排列方式。 |
| row-reverse | 反转横向排列，即从右往左排，最后一项排在最左边 |
| column | 纵向排列，从上往下排 |
| column-reverse | 反转纵向排列，即从下往上排，最后一项排在最上面 |
flex-direction:row
flex-direction:row-reverse
flex-direction:column
flex-direction:column-reverse
justify-content
justify-content设置主轴上的子元素排列方式
注意： 使用这个属性之前一定要确定好主轴是哪个
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值，元素从容器的起始线排列 |
| flex-end | 从终止线开始排列 |
| center | 在主轴居中对齐 |
| space-between | flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边 |
| space-around | flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到每个元素主轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小 |
| space-evenly | flex容器除去flex item在主轴所占的空间后，将剩余空间平均分配到每个元素主轴方向的间隙，每个间隙都是相等的，主轴两端也会有间隙。兼具了space-between与space-around的特点 |
假设flex-direction: row;
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
flex-wrap
指定弹性盒子的子元素换行方式。
其语法格式为：
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
| 属性值 | 描述 |
|---|---|
| nowrap | 默认，不换行，弹性容器为单行。该情况下弹性子项可能会溢出容器，如果一行容纳不下默认会等比例压缩flex item |
| wrap | 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行 |
| wrap-reverse | 反转 wrap 排列，按从左往右，从下往上的顺序排列，会换行，下一行在上一行的上方 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
color: black;
}
#content {
width: 240px;
height: 300px;
background-color: white;
border:1px solid #000;
display: flex;
flex-wrap: nowrap;
}
.item1 {
background-color: #ffe5b9;
}
.item2 {
background-color: #eff8ff;
}
.item3 {
background-color: #c9cbff;
}
</style>
</head>
<body>
<div id="content">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>
</html>
nowrap：由于没有换行，且是弹性盒模型，一行放不下，所以盒子被压缩成width:80px
wrap
wrap-reverse
align-items
设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
| 属性值 | 说明 |
|---|---|
| flex-start | 贴着侧轴起始线 |
| flex-end | 贴着侧轴尾线 |
| center | 侧轴上居中 |
| stretch | 未给flex item设置侧轴上的长度时，将flex item拉伸到与flex容器侧轴上的长度一样长。如果flex item设置了侧轴上的长度则stretch |
| baseline | 文字基线对齐 |
假设flex-direction: row;
- flex-start
- flex-end
- center
- stretch: 这里要子元素不设置高度才生效
- baseline
align-content
设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。
| 属性值 | 说明 |
|---|---|
| flex-start | 贴着侧轴起始线排列 |
| flex-end | 贴着侧轴尾线排列 |
| center | 在侧轴居中对齐 |
| space-between | flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到元素之间，所以元素之间间隔相等，就是两侧的flex item会贴着flex容器的边 |
| space-around | flex容器除去flex item在侧轴所占的空间后，将剩余空间平均分配到每个元素侧轴的两侧，因为两侧空间会相加，所以最边上的缝隙会比中间的缝隙小 |
| stretch | 拉伸子元素，使得子元素平均占满父元素侧轴方向的长度，同样注意子元素不能在侧轴方向上设置长度，否则 stretch会失效 |
假设flex-direction: row;
flex-start
flex-end
center
space-between
space-around
stretch
align-content 和 align-items 区别
- align-items 适用于单行情况下，对多行也生效，只有上对齐、下对齐、居中和 拉伸这些效果
- align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结就是单行用 align-items 多行用 align-content，判断是否是单行就看有没有分行
flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;等效于flex-direction: row;flex-wrap: wrap;
flex 布局子项常见属性
- flex 子项目占的份数
- align-self 控制子项自己在侧轴的排列方式
- order属性定义子项的排列顺序（前后顺序）
flex 属性
flex是个复合属性，属性值只有一个不带单位的数字时，与flex-grow等效, 父元素主轴长度大于子元素主轴长度总和时，子元素主轴长度=free space*(该元素的flex数字/所有子元素flex数字之和)
/* 关键字值 */
flex: auto;
flex: initial;
flex: none;
/* 一个值，无单位数字：flex-grow */
flex: 2;
/* 一个值，width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;
/* 两个值：flex-grow | flex-basis */
flex: 1 30px;
/* 两个值：flex-grow | flex-shrink */
flex: 2 2;
/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/*全局属性值 */
flex: inherit;
flex: initial;
flex: unset;
flex 属性定义flex item分配剩余空间(free space)，用flex来表示占多少份数。
.item {
flex: <number>; /* default 0 */
}
举例1: 第1个和第3个子元素都指定了宽度，free space=flex容器宽度-设定了宽度的子元素的宽度。因为只有第二个子元素指定flex:1，且flex容器有剩余的空间，所以该子元素的宽度=free space*(1/1)=free space, 即它会把剩余空间占满
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
<section>
<div></div>
<div></div>
<div></div>
</section>
举例2：因为子元素都没设置宽度，所以剩余空间就是父元素的宽度。子元素都指定了flex，所以它们的宽度=free space*(本元素flex值/子元素flex值总和), 即flex数字是多少就占父元素宽度的几份
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
background-color: purple;
}
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
如果子元素都为flex:1;则子元素均分剩余空间
p span {
flex: 1;
}
align-self
控制子项自己在侧轴上的排列方式
align-self 属性允许单个子项有与其他子项不一样的对齐方式，可覆盖 align-items 属性。
值
- auto: 默认值，继承父元素的 align-items 值，如果没有父元素，则等同于 stretch
- normal: 效果取决于当前的布局模式
- flex-start：flex 元素会对齐到 cross-axis 的首端。
- flex-end：flex 元素会对齐到 cross-axis 的尾端。
- center：flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。
span:nth-child(3) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
order
属性定义项目的排列顺序
数值越小，排列越靠近主轴起始线，默认为0。
注意：和 z-index 不一样。
.item {
order: <number>;
}
<head>
<title>Document</title>
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
}
div span {
width: 150px;
height: 100px;
}
div span:nth-child(2) {
/* 默认是0 -1比0小所以在前面 */
order: -1;
}
</style>
</head>
<body>
<div>
<span style="background-color: red;">1</span>
<span style="background-color: green;">2</span>
<span style="background-color: skyblue;">3</span>
</div>
</body>
二维变换
二维变换有平移，旋转，缩放，反射，错切
transform 是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。
这里介绍以下三种常用的转换函数：
- 旋转函数（rotate）
- 移动函数（translate）
- 缩放函数（scale）
translate平移
CSS中的二维坐标系如下（注意y轴正方向与数学中常见的二维坐标系中的y轴正向不一样）
- 语法
transform: translate(x,y); // 或者分开写
transform: translateX(n); // 沿x轴方向，参数为正沿x轴正向，为负沿x轴负向
transform: translateY(n); // 沿y轴方向，参数为正沿y轴正向，为负沿y轴负向
- 特点
- translate最大的优点：不会影响到其他元素的位置
- 参数可以是带单位的数值或百分比，百分比是相对于自身元素的尺寸而言的
- 对行内标签不起效果
<head>
<style>
/* 移动盒子的位置： 定位 盒子的外边距 2d转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
/* transform: translate(x, y); */
/* transform: translate(100px, 100px); */
/* 1. 我们如果只移动x坐标 */
/* transform: translate(100px, 0); */
/* transform: translateX(100px); */
/* 2. 我们如果只移动y坐标 */
/* transform: translate(0, 100px); */
/* transform: translateY(100px); */
}
.div1 {
transform: translate(30px, 30px);
}
.div2 {
background-color: purple;
}
span{
// translate对行内标签不起效果
transform: translate(30px, 30px);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<span>123</span>
</body>
技巧：可以利用translate实现子盒子相对父盒子居中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
// 老方法：通过margin让盒子往左上走自己该方向长度的一半
/* margin-top: -100px;
margin-left: -100px; */
/* 盒子往左上走自己该方向长度的一半 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
rotate旋转
在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕一点旋转，主要在二维空间内进行操作。
- 语法
transform:rotate(度数) // 单位是deg（度） - 重点
- rotate里面跟度数， 单位是 deg 比如 rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
transform-origin可以指定旋转点
- 语法
transform-origin: x y;// x, y是相对于元素左上角而言的
- 重点
- 参数可以是带单位的数值，百分比，关键字（left|right|bottom|top|center）
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点 (50% 50%)
练习1：利用旋转制作下拉三角
以前做法：使用下三角形状的字体图标
现在可以通过rotate实现下拉三角效果
参考代码
- 这个是教程思路：我感觉这个更美观灵活些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
position: relative;
width: 230px;
height: 30px;
border: 1px solid #000;
}
div::after{
content: "";/* 必须要有设置内容这一属性，否则这个伪元素盒子显示不出来 */
position: absolute;
top: 6px;
right: 10px;
width: 10px;
height: 10px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(45deg);
transition: all .3s;
}
div:hover::after{
/* 注意角度是相对于元素初始的状态，就是没有做任何旋转的状态 */
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
- 这个是我刚开始的思路，感觉这个虽然代码量少些，但是不够灵活，不太好看（尖角的角度比较小）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 230px;
height: 30px;
border: 1px solid #000;
}
div>span{
float: right;
margin-top: 5px;
margin-right: 5px;
transform: rotate(90deg);
transition: all .3s;
}
div:hover>span{
/* 注意角度是相对于元素初始的状态，就是没有做任何旋转的状态 */
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div id="box">
<span>></span>
</div>
</body>
</html>
练习2：当鼠标悬浮到框里时，方块转到框里。鼠标离开框后，方块转回看不见的位置
参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin:100px auto;
border: 2px solid green;
/* 隐藏溢出部分 */
overflow: hidden;
}
div::before{
/* 伪元素默认是行内元素，需转换成行内块或块级元素才可以指定宽高 */
display: block;
content: "hello!";/* 必须要有设置内容这一属性，否则这个伪元素盒子显示不出来 */
width: 100%;
height: 100%;
background-color: green;
transform-origin: left bottom;
transform: rotate(90deg);
transition: all .3s;
}
div:hover::before{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
scale缩放
给元素添加上了这个属性就能控制它放大还是缩小
- 语法
transform: scale(x,y) | scale(a); /*元素按照指定值沿着 X 轴和 Y 轴缩放, 只有一个参数表示等比例缩放，参数表示原来大小的倍数，所以当参数为1时就相当于大小没变*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/
- 注意
- transform:scale(1,1) ：宽和高都是原来的一倍，相当于没有放大
- transform:scale(2,2) ：宽和高都放大了2倍
- transform:scale(2) ：只写一个参数，则第二个参数则和第一个参数一样，相当于 scale(2,2)
- transform:scale(0.5,0.5)：小于1的参数表示缩小
- sacle缩放最大的优势：可以设置缩放中心点，默认以中心点缩放的，而且不影响其他盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 可以设置缩放中心点 */
/* transform-origin: left bottom; */
}
div:hover {
/* 1. 里面写的数字不跟单位 就是倍数的意思， 1 就是1倍 2就是 2倍 */
/* transform: scale(x, y); */
/* transform: scale(2, 2); */
/* 2. 修改了宽度为原来的2倍 高度 不变 */
/* transform: scale(2, 1); */
/* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法 以下是 宽高都修改了2倍*/
transform: scale(2);
/* 4. 我们可以进行缩小 小于1 就是缩放 */
/* transform: scale(0.5, 0.5); */
/* transform: scale(0.5); */
/* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
}
</style>
</head>
<body>
<div></div>
123123
</body>
</html>
练习1：实现鼠标悬浮图片放大效果
<head>
<style>
div {
overflow: hidden;
margin: 100px auto;
}
div img {
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div>
<a href="#"><img src="media/scale.jpg" alt=""></a>
</div>
</body>
练习2：鼠标悬浮分页按钮放大
<head>
<style>
li {
float: left;
width: 30px;
height: 30px;
border: 1px solid green;
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>
</ul>
</body>
transform-origin指定变换中心
对于rotate就是旋转中心，对于scale就是缩放中心，总之就是变换的中心。（因为相对于任何一个点平移效果都是一样的，所以没有平移中心这一说法）
- 语法
transform-origin: x y;// x, y是相对于元素左上角而言的
- 重点
- 参数可以是带单位的数值，百分比，关键字（left|right|bottom|top|center）
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点 (50% 50%)
transform转换综合写法
transform是一个复合属性，转换函数可以都写到这个属性中，CSS会按顺序执行这些函数，所以要注意书写顺序
注意：
- 同时使用多个转换，其格式为：transform: translate() rotate() scale() …等，
- 其顺序会影转换的效果。（先旋转会改变坐标轴方向）
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前
- 若同时有位移和旋转属性的时候，位移最好放到最前，因为旋转会导致盒子自身的坐标系（类似于物体坐标系）也跟着旋转，旋转后再平移容易出错
transform转换总结
- 转换transform 简单理解就是变形, 有2D 和 3D 之分
- 我们暂且学了三个 分别是 位移 旋转 和 缩放
- transform转换不会影响其他元素布局
动画
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
动画的基本使用，制作动画分为两步：
1.先定义动画
2.再使用（调用）动画
1. @keyframes定义动画
使用@keyframes规则，你可以创建动画，keyframes就是关键帧的意思
@keyframes 动画名 {
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}
percent：为百分比值，表示动画进度，可以添加多个百比，可以理解为每一个百分比样式对应一个关键帧。这些关键帧就是动画序列
动画序列
- 0% 是动画的开始，100% 是动画的结束
- 请用百分比或关键字来规定变化发生的时间，关键词 “from” 和 “to”，等同于 0% 和 100%。
2. 执行动画
执行动画必须指定动画名和持续时
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: rgb(62, 132, 175);
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 定义动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 动画名称，必须 |
| animation-duration | 动画周期，默认是0，必须 |
| animation-timing-function | 动画的速度曲线，默认是“ease” |
| animation-delay | 动画延迟开始时间，默认是0 |
| animation-iteration-count | 动画被播放的次数，默认是1，还有infinite（无限次） |
| animation-direction | 每个动画周期结束后，动画是否逆向播放，默认是“normal“,alternate逆播放 |
| animation-play-state | 动画是否正在运行或暂停。默认是"running","paused"是暂停 |
| animation-fill-mode | 默认回到初始状态backwards，forwards是保持 |
| timing-function值 | 描述 |
|---|---|
| ease | 逐渐变慢（默认） |
| linear | 匀速 |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速后减速 |
| steps(步数) | 指定了时间函数中的间隔数量（步长），是离散地一步一步地变化的，不是连续变化 |
| direction值 | 描述 |
|---|---|
| normal | 默认值为normal表示顺序播放 |
| alternate | 动画第奇数次顺序播放，第偶数次逆序播放 |
复合属性animation
一般更常用复合属性animation
/* animation：动画名称 持续时间 运动曲线 延迟时间 播放次数 是否逆向播放 播放完后是否回到起始状态; */
animation: name duration [timing-function] [delay] [iteration-count] [direction] [fill-mode];
- 简写属性里面不包含 animation-play-state
- 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
- 想要动画走回来 ，而不是直接跳回来：animation-direction ： alternate
- 盒子动画结束后，停在结束位置： animation-fill-mode ： forwards
动画实现呼吸效果
<div class="box"></div>
.box {
width: 100px;
height: 100px;
margin: 40px auto;
border-radius: 50%;
background-color:rgba(255, 255, 255, 0.6) ;
animation: breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe {
0% {
opacity: .2;
background-color:rgba(255, 255, 255, 0.6) ;
box-shadow: 0 1px 2px rgba(255, 255, 255, 0.4)
}
100% {
opacity: 1;
background-color:rgba(255, 89, 0, 0.6) ;
box-shadow: 0 1px 30px rgba(255, 89, 0, 0.6)
}
}
练习1：实现大数据热点图中的波纹效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
/* 因为图片是白色透明底的，如果背景也是白色的话就看不到图片，所以将背景设置成深灰色 */
background-color: #333;
}
.bg{
position: relative;
/* 这里设置容纳图片的div与图片一样大 */
width: 747px;
height: 617px;
background-image: url(media/map.png);
background-repeat: no-repeat;
margin: auto;
}
/* .city1,.city2,.city3的共有样式 */
.city1,.city2,.city3{
/* 设置绝对定位方便移动实心点 */
position: absolute;
top: 228px;
right: 191px;
width: 8px;
height: 8px;
background-color: aqua;
border-radius: 50%;
}
/* 不同城市的实心点位置不同，要覆盖之前共有的top和right属性 */
.city2{
top: 498px;
right: 78px;
}
.city3{
top: 530px;
right: 172px;
}
/* 属性选择器权重与类选择器一样 */
[class^="pluse"]{
/* 设置绝对定位放置三个pluse挤下来，即要让他们层叠在一起 */
position: absolute;
/* 虽然pluse与父盒子city一样大，表面上看是重合在一起，没有将子盒子移动到父盒子中心的必要，但这样子盒子的中心在左上角，在之后波纹变大时会以左上角为中心变大。以下3行不仅能让子盒子移到父盒子中心，还能让子盒子的中心在自己及父元素的中心位置 */
top:50%;
left: 50%;
transform: translate(-50%,-50%);
/* */
width: 8px;
height: 8px;
border-radius: 50%;
/* 注意要设置infinite无限次播放动画 */
animation: pluse 1.2s linear infinite;
}
/* 注意设置延迟时间 */
.pluse2{
animation-delay: .3s;
}
.pluse3{
animation-delay: .6s;
}
@keyframes pluse{
/* 设置了波纹逐渐减弱最后消失的效果 */
0%{
width: 8px;
height: 8px;
box-shadow: 0px 0px 8px rgb(0, 255, 255,1);
}
70%{
/* 因为设置的是匀速linear，所以波纹大小为8*7=56 */
width: 56px;
height: 56px;
box-shadow: 0px 0px 8px rgb(0, 255, 255,.3);
}
100%{
/* 8*10=80 */
width: 80px;
height: 80px;
box-shadow: 0px 0px 8px rgb(0, 255, 255,0);
}
}
</style>
</head>
<body>
<div class="bg">
<div class="city1">
<div class="dot"></div>
<div class="pluse1"></div>
<div class="pluse2"></div>
<div class="pluse3"></div>
</div>
<div class="city2">
<div class="dot"></div>
<div class="pluse1"></div>
<div class="pluse2"></div>
<div class="pluse3"></div>
</div><div class="city3">
<div class="dot"></div>
<div class="pluse1"></div>
<div class="pluse2"></div>
<div class="pluse3"></div>
</div>
</div>
</body>
</html>
补充说明代码注释中那很长的一段
<head>
<style>
.fa{
position: absolute;
height: 100px;
width: 100px;
background-color: red;
}
.son{
position: absolute;
height: 50px;
width: 50px;
background-color: green;
}
.son:hover{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
为加上那3行代码，子盒子变大的参考点是子元素左上角
.son中加上以下3行代码，子盒子变大的参考点是自己的中心
top:50%;
left:50%;
transform: translate(-50%,-50%);
练习2：实现人或动物的连续动作
这里实现北极熊行走的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
/* 背景不要是白色，否则看不到熊 */
background-color: #ccc;
}
.bg{
position: relative;
height: 336px;
background: url(media/bg1.png) no-repeat;
animation: bg 10s linear infinite;
}
.box{
position: absolute;
width: 200px;
height: 100px;
top:50%;
/* 不要写成background-image: url(media/bear.png) no-repeat; 这样把单个属性写成了复合属性，不生效*/
background: url(media/bear.png) no-repeat;
/* 多个动画间用逗号分隔 */
animation: bear .8s steps(8) infinite,move 1s linear forwards ;
background-position: 0 0;
}
/* 熊奔跑动画 */
@keyframes bear {
0%{
background-position-x:0;
}
100%{
/* 为什么是-1600px而不是-(1600-200)=-1400px */
background-position-x:-1600px;
}
}
/* 熊移动到屏幕中央动画 */
@keyframes move{
0%{
left:0;
}
100%{
/* 跑到屏幕中央 */
left:50%;
transform: translateX(-50%);
}
}
/* 背景移动动画 */
@keyframes bg {
0%{
background-position-x:0;
}
100%{
/* 为啥这里就不能是图片宽度3840px，而要3840-body宽度1520=2320px才不出现空白区域？ */
background-position-x:-2320px;
}
}
</style>
</head>
<body>
<div class="bg">
<div class="box">
<!-- <img src="media/bear.png" alt=""> -->
</div>
</div>
</body>
</html>
实时效果反馈
1.动画属性中，iteration-count: infinite 属性的作用是：
A 设置动画效果时间
B 设置动画效果速率
C 设置动画的开始时间
D 设置动画无限循环
答案
1=>D
雪碧/精灵图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去
为什么需要精灵图
如果一个网页有很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送
请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少发送请求和服务器接收请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称
CSS Sprites、CSS 雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。
优点
- 减少图片的字节
- 减少网页的http请求，从而大大的提高页面的性能
原理
-
通过
background-image:url(图片地址);引入背景图片
-
通过
background-position:水平位置 垂直位置;把背景图片移动到自己需要的位置,注意是移动背景图片
注意网页坐标的正方向是右下，负方向是左上
使用精灵图核心： -
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
-
这个大图片也称为 sprites 精灵图 或者 雪碧图
-
移动背景图片位置， 此时可以使用 background-position 。
-
移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标和数学传统的二维坐标正方向有所不同
-
因为一般情况下都是把精灵图往上往左移动，所以数值是负值。
-
使用精灵图的时候需要精确测量，每个小背景图片的大小（决定盒子大小 和 位置（一般这个位置取负数就是background-position的值）。
实例
<i class="icon1"></i>
<i class="icon2"></i>
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
/*可以将这2个属性写一起*/
background: url(images/sprites.png) no-repeat -182px 0;
}
.box2 {
width: 27px;
height: 25px;
margin: 200px;
background-image: url(images/sprites.png)
background-position: -155px -106px;
}
浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
- 私有前缀
-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性 - 提倡的写法
将兼容和普通的写法都写上
-moz-border-radius: 10px;
-webkit-border-radius: 10px; // 兼容webkit内核的浏览器
-o-border-radius: 10px;
border-radius: 10px; // 普通写法
多列布局
作用：专门用于实现类似于报纸的布局。
属性如下：
- column-count属性指定了需要分割的列数，值是数字。
- column-width ：指定列宽，值是长度。会根据列宽计算容器中可放置的列数，比如父容器宽1000px，指定
column-width: 250px，那么可以分成3列而不是4列，因为还有列间距。 - columns ：同时指定列宽和列数，column-count和column-width的复合属性，值没有数量和顺序要求。如果列数和由列宽计算所得的列数起冲突，会以列数少的为准，比如父容器宽1000px，设置
columns:400px 3，由列宽计算所得的列数为2列，而columns中又指定3列，那么实际上是2列 - column-gap 属性指定了列与列间的间隙，值是长度。默认是一个字的间距。设置
column-gap:0时并不会让间距为0，此时仍会有间距，只是这个间距小于一个字的宽度。 - column-rule-style：设置列与列之间边框的风格，值与 border-style 一致。
- column-rule-width ：设置列与列之间边框的宽度，值是长度。
- column-rule-color ：设置列与列之间边框的颜色。
- coumn-rule ：设置列边框样式，是column-rule-style、column-rule-width和column-rule-color的复合属性。类似于符合属性border
- column-span 指定是否跨列；取值为
none或all。
备注：前8个属性都是在父容器中设置，最后column-span是对于需要跨列的元素设置的
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_多列布局案例</title>
<style>
.outer {
width: 1000px;
margin: 0 auto;
/* 直接指定列数 */
/* column-count: 5; */
/* 指定每一列的宽度，会自动计算列数 */
/* column-width:220px ; */
/* 复合属性，能同时指定列宽和列数（不推荐这样做） */
columns: 4;
/* 调整列间距 */
column-gap: 20px;
/* 每一列的边框宽度 */
/* column-rule-width: 2px; */
/* 每一列的边框风格 */
/* column-rule-style: dashed; */
/* 每一列的边框颜色 */
/* column-rule-color: red; */
/* 边框相关的复合属性 */
column-rule: 2px dashed red;
}
h1 {
column-span: all;/* 为需要跨列的元素设置这个属性 */
text-align: center;
font-size: 50px;
}
img {
width: 100%;/* 此百分比是相对于一列的宽度 */
}
</style>
</head>
<body>
<div class="outer">
<h1>《震惊！某地XXX来学前端了！》</h1>
<p>【开始】唐僧师徒四人忙着赶路，吃不好、睡不好，走了几天，来到一个景色迷人的万寿山五庄观，见天色不早，就想在五庄观里住上一晚。五庄观里的两个童子听说他们是来自东土大唐要到西天取经的，连忙说∶“我家师父到元始天尊那里讲经去了，让我们在这里等您，请快快进屋。”原来，这童子的师父是镇元子，在五百年前的兰盆会上认识了唐僧前世金蝉子。临走时曾告诉两个童子要好好对待唐僧，并交待童子用观里的两颗宝贝人参果招待他。【结束】</p>
<img src="../images/shanghai.jpg" alt="">
<p>【开始】两人摘了人参果，趁着唐僧的徒弟不在，偷偷拿来给唐僧吃。唐僧看见人参果就好像刚出生的婴儿一样，吓得浑身发抖，使劲摇手不敢吃。两个童子越是解释说∶“这是仙果，不是人！”唐僧仍是不信，让他们赶快端走。两个童子没有办法，只好端着人参果，回到房里。因为那人参果不能久放，否则吃下也不能长寿，于是两童子一人一个，分着吃了。说来也巧，这间房子正好和厨房挨着，两童子分吃人参果的事，八戒听得明明白白，看得清清楚楚，馋得直流口水，恨不得立刻吃一个。【结束】</p>
<p>【开始】一会儿，悟空放马回来，八戒连忙把刚才的事情告诉了师兄。悟空早就听说过人参果，只是没有吃过，于是就按照八戒说的，用了一个隐身的法术，偷偷溜进道房，拿走了二童子摘果用的金击子，露出了一颗人参果果，跑到后园去摘人参果。这人参果树有一千多尺高，非常茂盛，朝南的枝头上，露出了一颗人参果。悟空轻轻一跳一跳，跳上树枝，用金击子一敲，那果子就掉下来，悟空紧跟着跳下来，可是却找不到那果子。悟空把果园里的土地神抓来，露出了一颗人参果，问他为什么把人参果偷走。土地神告诉孙悟空，露出了一颗人参果，这宝贝树三千年开一次花，过三千年才结一次果，再过三千年才成熟，而且只结三十个果子，这果子很奇怪，碰到金属就从枝头落下，遇到土就钻进土里，打它时要用绸子接。【结束】</p>
<p>【开始】悟空送走土地神后，一手拿金击子敲，一手扯着自己的衣服接了三个果子。悟空回到厨房后，让八戒把沙僧叫来，三个人每人分一个。猪八戒性急，一口把果子吞下去，什么味道也没有尝出来，就想让悟空再去偷几个。悟空告诉他这人参果是一万年才结三十个果子，能吃到一个，就应该满足了，说完就把金击子放回了原处。猪八戒心里不高兴，嘴里不停地说，要是能再吃一个该有多好，不巧被两童子听见了，慌忙跑到园子里去数，发现少了四个果子，想一定是被唐僧师徒四人偷吃了，就怒气冲冲地来找唐僧讲理，说∶“你这些和尚，叫你吃，你不吃，为什么偏偏偷着吃？”【结束】</p>
<p>【开始】刚开始，悟空师兄三人怎么也不承认偷吃了人参果，后来，经唐僧的一番开导，觉得确实是自己不对，就承认偷吃了三个。两个童子却说是四个，还骂了许多难听的话。悟空火了，拔了一根毫毛变成一个假悟空站在那挨骂，自己跳上云头向后园飞去。悟空一进果园，就拿出金箍棒一阵乱打，又使出自己的神力，把树连根拔出，摔在地上，仙果从树上掉下来，又碰到了土就全部钻到土里去了。【结束】</p>
<p>【开始】悟空回到房中，收回毫毛，让两个童子随便骂，也不还口。两个童子见唐僧他们一句话也不说，就想，是不是树太高，叶子太密，自己数不清，又回到果园仔细看看。一到果园，见那情景，吓得他们半死，趴在地上，放声大哭∶“师父回来，可怎么说呀！”两个童子商量，先把唐僧留住，师父回来也好说一些，于是回到房中，假说果子一个也没有少，是自己刚才数错了，请唐僧他们原谅。【结束】</p>
<p>【开始】接着，他们给唐僧师徒们准备了很多饭菜，趁他们吃饭时，关上门，又用一把大铜锁，把门锁上。孙悟空早就有了主意，等到夜深人静的时候，用开锁法术，将一道道紧锁的大门都打开，拔毫毛变成两个瞌睡虫，扔在童子脸上，两童子便呼噜地睡着了。唐僧师徒四人这才趁着黑夜逃出来，向西天赶路去了。天亮时镇元子回到五庄观，发现两个童子被人施了法术，躺在那里睡大觉，连忙运用神功把他们叫醒。二童子一见师父回来了，便急忙跪下，请师父原谅他们，并把唐僧师徒偷吃仙果，毁坏仙树的事情告诉了师父。镇元子想这一定是孙悟空干的，便去找孙悟空讲理。【结束】</p>
</div>
</body>
</html>
注意：如果容器中有图片，请设置该图片的width 属性（值最好是百分比），否则该图片若大于列的宽度就会超出列的范围。
如下是该图片未设置宽度的情况，图片超出了列的范围
2772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
