CSS3新特性
CSS3 现状 ：新增的CSS3特性有兼容性问题，ie9+才支持 ；移动端支持优于 PC 端
1、CSS3 新增选择器
1、属性选择器
2、结构伪类选择器
3、伪元素选择器
（1）属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。
| 选择符 | 描述 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
| E[att^="val"] | 选择具有att属性且属性值以val开头的E元素 |
| E[att$="val"] | 选择具有att属性且属性值以val结尾的的E元素 |
| E[att*="val"] | 选择具有att属性且属性值中含有val的E元素 |
注意：类选择器、属性选择器、伪类选择器，权重为 10。
input[type=search] {
color: skyblue;
}
span[class^=black] {
color: lightgreen;
}
span[class$=black] {
color: lightsalmon;
}
span[class*=black] {
color: lightseagreen;
}
（2）结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
ul li:nth-child(2n) {}
| 选择符 | 描述 |
|---|---|
| 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个 |
① ：nth-child（n）：选择某个父元素的一个或多个特定的子元素（重点）
-
-
-
n 可以是数字，关键字和公式
-
n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
-
n 可以是关键字：even 偶数，odd 奇数
-
n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )
-
-
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5、10、15(学成在线 li 修改) |
| n+5 | 从第5个开始（包含第5个）到最后 |
| -n+5 | 前5个（包含第5个） |
② nth-child 和 nth-of-type 的区别
1、nth-child 选择父元素里面的第几个子元素，不管是第几个类型
对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
2、nth-of-type 选择指定类型的元素
对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
/* nth-child 会把所有的盒子排列序号 */
/* 执行的时候先看 ：nth-child（1） 之后回去选前面 div */
section div:nth-child(1) {
background-color: red;
}
/* :nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看：nth-of-type（1）第几个孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
③ 小结
1.结构伪类选择器一般用于选择父级里面的第几个孩子
2.nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
3.nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
4.关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式
5.如果是无序列表，我们肯定用 nth-child 更多
6.类选择器，属性选择器，伪类选择器，权重为10
（3）伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
伪元素的 元素在html码以及文档树中是找不到的，通过css创建，所以叫伪元素；
语法： element::before {}
| 选择符 | 描述 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
1.before 和 after 创建一个元素，都属于行内元素，不能设置大小，是一个盒子，
2.before 和 after 必须有 content 属性
3.伪元素选择器和标签选择器一样，权重为 1
案例：伪元素选择器
使用场景1：伪元素字体图标：下拉三角按钮
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
content: '\e91e';/* 字体图标放在 content中 */
color: red;
font-size: 18px;
}
案例：伪元素选择器
使用场景2：仿土豆效果
<style> /* 以前是在结构里创建一个遮罩层盒子mask，结构比样式重要，更简便 */ .tudou::before { content: ''; /* 隐藏遮罩层 */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(images/pic.png) no-repeat center; } /* 当鼠标经过 土豆这个盒子，就让里面的before遮罩层显示出来 中间不要加空格*/ .tudou:hover::before { /* 显示元素 */ display: block; } </style>
案例：伪元素选择器
使用场景3：伪元素清除浮动
1、额外标签法也称为隔墙法，是 W3C 推荐的做法。 要求这个新的空标签必须是块级元素
2、父级添加 overflow 属性
3、父级添加after伪元素
4、父级添加双伪元素
后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。
.clearfix:after {
/* 伪元素必须写的属性 */
content: "";
/* 插入的元素必须是块级 */
display: block;
/* 不要看见这个元素 */
height: 0;
clear: both;
/* 隐藏元素 */
visibility: hidden;
}
/* 双伪元素，前后都闭合清除，清楚浮动的本质是闭合浮动 */
.clearfix:before,
.clearfix:after {
content: '';
/* 一个表格有两个单元格，即转换成块级元素，又在一行显示 */
display: table;
}
.clearfix:after {
clear: both;
}
2、CSS3 盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：content-box、border-box
可以分成两种情况：
1、box-sizing: content-box; // 盒子大小为 width + padding + border （以前默认的）
2、box-sizing: border-box; // 盒子大小为 width
如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding 和border不会超过width宽度）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
3、CSS3 其他特性（了解）
-
图片变模糊
-
计算盒子宽度 width: calc 函数
3.1、CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数();
filter: blur(5px); blur模糊处理 数值越大越模糊
3.2、calc 函数:
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。括号里面可以使用 + - * / 来进行计算。
width: calc(100% - 80px);
3.3、 css三角：
可以用CSS直接画出 等分 三角形，不必做成图片或者字体图标；
<style> .box1 { float: left; width: 0; height: 0; line-height: 0; font-size: 0; border: 50px solid transparent; border-top-color: pink; } /*我们用css 边框可以模拟三角效果*/ .box2 { float: left; width: 0; height: 0; border-top: 30px solid pink; border-right: 30px solid red; border-bottom: 30px solid blue; border-left: 30px solid green; } p { width: 0; height: 0; border-style: solid; border-width: 10px; border-color: transparent transparent transparent red; font-size: 0; line-height: 0; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <p></p> </body>
3.31 案例：京东三角
<style> .jd { position: relative; width: 120px; height: 249px; background-color: red; margin: 100px auto; } .jd span { position: absolute; right: 15px; top: -10px; width: 0; height: 0; /* 为了照顾兼容性 */ line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom-color: red; } </style> <body> <div class="jd"> <span></span> </div> </body>
3.32 两种三角
<style> .box1 { // 直角三角形：去掉下边框和左边框，上边框加大，保留右边框 // 等分三角形 去掉 下边框，加大上边框； width: 0; height: 0; border-color: transparent red transparent transparent; border-style: solid; border-width: 100px 50px 0 0; } // 等分三角形：四个边框分别设置四种颜色，若想要一种，先全部设置透明色，在单独设置某一边颜色 .box { width: 0; height: 0; border: 100px solid transparent; border-right-color: blue; } </style>
3.33 圆角
<title>CSS三角强化的巧妙运用</title> <style> .box1 { width: 0; height: 0; /*把上边框宽度调大*/ border-top: 100px solid transparent; border-right: 50px solid skyblue; /* 左边和下边的宽度边框设置为0 */ border-bottom: 0 solid blue; border-left: 0 solid green; } </style>
案例：京东秒杀
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .price { width: 160px; height: 24px; border: 1px solid red; margin: 0 auto; } .miaosha { position: relative; float: left; width: 90px; height: 100%; background-color: red; text-align: center; color: #fff; font-weight: 700; margin-right: 8px; } .miaosha i { position: absolute; right: 0; top: 0; width: 0; height: 0; border-color: transparent white transparent transparent; border-style: solid; border-width: 24px 10px 0 0; } .origin { font-size: 12px; color: gray; text-decoration: line-through; } </style> </head> <body> <div class="box"></div> <div class="price"> <span class="miaosha">$1650 <i></i> </span> <span class="origin">$5650</span> </div> </body> </html>
3.4 CSS用户界面样式
3.41、鼠标样式 cursor
（1）作用：设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状；
（2）语法：
li { cursor: pointer; }
（3）属性：
属性值 描述
default 小白，默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
3.42、轮廓线 outline
（1）作用：给表单添加outline：0 / none；样式后，去掉默认的蓝色边框；
（2）语法：
input { outline: none; }
3.43、防止拖拽文本域 resize
（1）作用：实际开发中文本域右下角不可拖拽；
（2）语法：
textarea { width: 500px; height: 249px; /*取消轮廓线*/ outline: none; /*边框改变颜色*/ border: 1px solid #036; /*防止用户拖拽文本域*/ resize: none; }
3.45、vertical-align属性
（1）、作用：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效；
（2）、语法：
vertical-align： baseline | top | middle | bottom
（3）、属性：
值 描述
baseline 默认，元素方在父元素基线上
top 把元素顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐
（4）、应用场景：
① 设置图片或者表单（行内块元素）和文字垂直对齐；
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐；此时可以将属性设置为middle，垂直居中对齐；
② 解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的 基线对齐；
解决：
给图片添加 vertical-align： top | middle | bottom（最提倡）
把图片转换为块级元素 display：block；
3.46、溢出文字省略号
（1）、单行文本溢出显示省略号--必须满足三个条件
/*1. 先强制一行内显示文本*/ white-space: nowrap; （ 默认 normal 自动换行） /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;
<style> div { width: 150px; height: 80px; background-color: pink; margin: 100px auto; /* 这个单词的意思是如果文字显示不开自动换行 */ /* white-space: normal; */ /* 如果文字显示不开，强制一行内显示 */ white-space: nowrap; /* 溢出隐藏 */ overflow: hidden; /* 溢出省略号 */ text-overflow: ellipsis; } </style>
（2）、多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit 内核）
overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical;
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
4、CSS3 过渡（重点）
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响 页面布局。
我们现在经常和 :hover 一起 搭配使用。
CSS3过渡格式：
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
属性：
想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
-
-
-
花费时间单位是 秒（必须写单位） 比如 0.5s
-
运动曲线 默认是 ease （可以省略）
-
何时开始 单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
-
记住过渡的使用口诀： 谁做过渡给谁加
-
-
案例：过渡
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始;
transition：width .5s ease 0s,height .5s ease 1s;
如果想要些多个属性，利用逗号分割
transition: width .5s,height .5s;
如果想要多个属性都变化，属性写all */
transition: all 0.5s;
}
5、2D 转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换（transform）可以简单理解为变形：
-
-
-
移动：translate
-
旋转：rotate
-
缩放：scale
-
-
二维坐标系：2D转换是改变标签在二维平面上的位置和形状的一种技术
5.1、2D 移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
（1）语法
transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
（2）重点
-
-
-
定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
-
translate最大的优点：不会影响到其他元素的位置
-
translate中的百分比单位是相对于自身元素的 translate:(50%,50%)，对行内标签没有效果
-
京东页面里的卡片上移效果就是 用的过度，移动，不会影响下面的盒子效果；
-
-
案例：2D转换 让盒子实现水平居中和垂直居中
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号分割
transform: translate(x,y);
1.只移动x坐标
transform: translate(100px,0);
transform: translateX(100px);
2.只移动y坐标
transform: translate(0,100px);
transform: translateY(100px);*/
transform: translate(-50%, -50%);
/* 1.可以跟方位名词 */
/* transform-origin: left bottom; */
/* 2.默认的是 50% 50% 等价于 center center */
/* 3.可以是px 像素 */
}
5.2、2D 旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
（1）语法：
transform:rotate(度数)
（2）重点
-
-
-
rotate里面跟度数， 单位是 deg 比如 rotate(45deg)；
-
角度为正时，顺时针，负时，为逆时针
-
默认旋转的中心点是元素的中心点
-
-
案例：
img {
width: 150px;
/* 顺时针旋转45度 */
transform: rotate(45deg);
border-radius: 50%;
border: 5px solid pink;
/* 过渡写在本身上，谁做过渡（动画）给谁加 */
transition: all .3s;
}
img:hover {
transform: rotate(360deg);
}
案例：书写三角符号
<style> div { position: relative; width: 249px; height: 35px; border: 1px solid #000; } div::after { content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 0.2s; } /* 鼠标经过div 里面的三角旋转 */ div:hover::after { transform: rotate(225deg); } </style>
5.3、2D 中心点 transform-origin
我们可以设置元素转换的中心点
（1）语法：
transform-origin: x y;
（2）重点
-
-
-
注意后面的参数 x 和 y 用空格隔开；
-
x y 默认转换的中心点是元素的中心点 (50% 50%)；
-
还可以给x y 设置 像素 或者 方位名词 （top bottom left right center）
-
-
案例：旋转中心案例
<style> div { overflow: hidden; width: 200px; height: 200px; border: 1px solid pink; margin: 10px; float: left; } div::before { content: "黑马"; display: block; width: 100%; height: 100%; background-color: hotpink; transform: rotate(180deg); transform-origin: left bottom; transition: all 0.4s; } /* 鼠标经过div 里面的before 复原 */ div:hover::before { transform: rotate(0deg); } </style>
5.4、2D 缩放scale
缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。
（1）语法
transform:scale(x,y);
（2）注意
-
-
-
注意其中的x和y用逗号分隔
-
transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
-
transform:scale(2,2) ：宽和高都放大了2倍
-
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
-
transform:scale(0.5,0.5)：缩小
-
sacle缩放最大的优势：
1、可以设置转换中心点缩放，默认以中心点向四周缩放，
2、而且不影响其他盒子（如果·直接设置 鼠标经过 放大宽高，会影响其他盒子）
-
-
案例：
div:hover {
/* transform: scale(x,y);
transform: scale(1,1); */
/* 2.修改宽度为原来的2倍，高度不变 */
/* transform: scale(2,1); */
/* 3.等比例缩放，同时修改宽度和高度 */
/* transform: scale(2); */
/* 4.缩小 小于1就是缩小 */
/* transform: scale(0.5,0.5); */
/* 5.优势：不会影响其他盒子 而且可以设置缩放的中心点 */
/* width: 300px;
height: 300px; */
transform: scale(2);
}
案例：图片放大 案例（鼠标经过 卡片放大原理）
div {
overflow: hidden;/* 溢出隐藏，以免超出范围 */
float: left;
margin: 10px;
}
div img {
transition: all 0.4s;
}
div img:hover {
transform: scale(1,1);
}
案例1：分页按钮 经过放大
<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> </ul>
5.5、2D 转换综合写法
注意：
-
-
-
同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，
-
其顺序会影转换的效果。（先旋转会改变坐标轴方向）
-
当我们同时有位移和其他属性的时候，记得要将位移放到最前
-
-
-
案例：
div {
width: 200px;
height: 200px;
background-color: pink;
transition: all .4s;
}
div:hover {
transform: rotate(180deg) translate(150px,50px);
transform: translate(150px,50px) rotate(180deg) ;
}
5.6、2D 转换总结
顺序：移动——旋转——缩放；位移永远写在最前面；
1、transform转换 简单理解就是变形，有2D 和 3D 之分；我们暂且学了三个 分别是 位移 旋转 和 缩放；
2、2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的；
可以分开写比如 translateX(x) 和 translateY(y)；
3、2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg
4、2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子
5、设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
6、动画
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
6.1 动画的基本使用
制作动画分为两步：
-
-
-
先定义动画
-
再使用（调用）动画
-
-
1、用 keyframes （关键帧）定义动画（类似定义类选择器）
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
2、元素使用动画
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
案例：移动盒子1
/* 1.定义动画 */
@keyframes move {
0% {
transform: translateX(0px); // 2D转换 移动
}
100% {
transform: translateX(1000px);
}
}
div {
/* 我们想要页面一打开，一个盒子就从左边走到右边 */
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
6.2 动画序列
-
-
-
0% 是动画的开始，100% 是动画的完成；这样的规则就是动画序列。
-
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
-
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
-
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
-
-
案例：
/* 1.定义动画 */
@keyframes move {
from {
transform: translateX(0, 0);
}
to {
transform: translate(1000px, 0);
}
}
/* 动画序列 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 10s;
}
案例：
/* 动画序列 */
1.可以做多个状态的变化 keyframe 关键帧
2.里面的百分比要是整数
3.里面的百分比就是 总得时间（10s）的划分
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
animation-name: move;
animation-duration: 10s;
}
6.3 动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 规定@keyframes动画的名称。（必须的） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的） |
| animation-timing-function | 规定动画的速度曲线，默认是“ease”，匀速是“linear”。 |
| animation-delay | 规定动画何时开始，默认是0。 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"paused"。 |
| animation-fill-mode | 规定动画结束后状态，保持当前状态forwards；回到起始backwards； |
案例：
/* 动画序列 */
1.可以做多个状态的变化 keyframe 关键帧
2.里面的百分比要是整数
3.里面的百分比就是 总得时间（10s）的划分 @keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
/* 动画序列 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 10s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 iteration 重复的 count 次数 indinite 无限 */
animation-iteration-count: infinite;
}
/* 是否反方向播放 默认normal 如果想要反方向，就写 alternate */
animation-direction: alternate;
/* 动画结束后的状态，默认 backwards 回到起始状态 可以让它停留在结束状态 forwards */
animation-fill-mode: forwards;
div:hover {
/* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
animation-play-state: paused;
}
6.4 动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
注意：
-
-
-
简写属性里面不包含 animation-play-state
-
暂停动画：animation-play-state: puased; 经常和鼠标经过hover等其他配合使用
-
想要动画走回来 ，而不是直接跳回来：animation-direction ： alternate
-
盒子动画结束后，停在结束位置： animation-fill-mode ： forwards
-
-
案例：大数据热点图
<!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> body { background-color: #333;/* 地图图片是透明的，加个背景色 */ } .map { position: relative; width: 747px; height: 616px; background: url(media/map.png) no-repeat; margin: 0 auto;/* 地图居中 */ } .city { position: absolute; top: 227px; right: 193px; color: #fff; } .tb { top: 500px; right: 80px; } .dotted { width: 8px; height: 8px; background-color: #09f;/* 实心圆 */ border-radius: 50%; } .city div[class^="pulse"] { /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);/* city居中 */ width: 8px; height: 8px; box-shadow: 0 0 12px #009dfd;/* 用阴影修饰光圈，比较自然 */ border-radius: 50%; animation: pulse 1.2s linear infinite; } .city div.pulse2 { animation-delay: 0.4s;/* 时间差 */ } .city div.pulse3 { animation-delay: 0.8s; } @keyframes pulse { 0% {} 70% { /* transform: scale(5); 我们不要用scale 因为他会让 阴影变大*/ width: 40px; height: 40px; opacity: 1;/* 波纹渐变透明，过度的较好 */ } 100% { width: 70px; height: 70px; opacity: 0;/* 透明度过度的更好 */ } } </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> <div class="city tb"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> </div> </body> </html>