CSS复习

第九章:CSS3基础

css的历史

1. CSS的发展得很好

初用CSS

1. css的语法单元是样式 每个样式包含两部分内容：选择器和声明（规则）
2. 引入CSS样式 有三种方法 第一种：行内样式（css样式置于标签的style属性中） 第二种：内部样式（css样式代码置于

5. css 注释 /* 注释内容 */
6. css属性众多 css2.1版本有115个属性 css3 新增20多个属性
7. css属性值 绝对值（in cm mm pt pc 用的较少） 相对值：em（能根据font-size的值来确定 如果font-size值为em 则继承上一个font-size的值来定大小）；ex：字母x的高度 ； px：像素点的大小（不同分辨路显示出来的效果不一样）； %：相对单位制 继承父元素的值来定大小。

元素选择器

1. 标签选择器 也称为类型选择器 它直接引用HTML标签名称 如 p { }

优点：使用简单 直接引用
缺点：范围过大，精度不够

2. 类选择器 以 . 号为前缀 后面是一个类名。 在标签中定义的class属性就是类名

优点：使用灵活，可以为一个标签定义多个类名
缺点: 需要定义class属性 影响文档结构 操作相对麻烦

3. ID选择器 以 # 号为前缀 后面是一个ID名。 在标签中定义的ID属性就是ID名

优点：精确匹配 一个标签只能有一个ID
缺点：需要定义ID属性 影响文档结构 相对于类选择器，缺乏灵活性

• 不管是类选择器还是ID选择器 都可以指定一个限定标签名 用于限定它们的应用范围 例如 div#box 优先级大于 #box

4. 通配选择器 使用 * 号 表示 用来匹配文档中的所有标签 * { }

关系选择器

1. 包含选择器 通过空格连接两个简单选择器 包含 被包含 #box p id为box的标签下面的p元素

优点：可以缩小匹配范围
缺点：匹配范围相对较大，影像的层级不受限制

2. 子选择器 通过 > 号连接两个简单的选择器 父对象>被包含的子对象 h2>span h2标签下的span元素

优点：相对于包含选择器 匹配范围更小。从层级结构上看 匹配目标更明确
缺点：相对于包含选择器 匹配范围有限 需要熟悉文档结构。

3. 相邻选择器 通过 + 号连接两个简单的选择器 相邻的前一个元素+相邻的后一个元素 h2+p h2标签相邻的p元素

优点:在结构中能够快速精确的找到同级，相邻的元素
缺点:使用前需要熟悉文档结构

4. 兄弟选择器 通过 ~ 号连接两个简单的选择器 同级的前置元素~其后同级所有匹配的元素 h2~p h2同级的p元素

优点：在结构中能够快速，精确的找到同级靠后的元素
缺点：需要熟悉文档结构，匹配精度没有相邻选择器具体

5. 分组选择器 通过 ， 号连接几个简单的选择器 前面选择器匹配的元素与后面选择器匹配的元素混在一起作为分组选择器的结果集 h1,h2,h3,h4 { } h1 h2 h3 h4作为分组选择器的结果集

可以合并相同样式，减少代码冗余
不方便个性管理和编辑

属性选择器

属性选择器是根据标签的属性来匹配元素，使用中括号进行标识 [属性表达式] CSS3中包括七种属性选择器形式 具体如下

1. E（attr） 选择具有attr属性的E元素 如 a[id] 表示选择所有带有ID属性的a元素 或者 a[id][href] 选择所有带有ID属性和href属性的a元素
2. E（attr=“value”） 选择具有attr属性且attr属性值为value的E元素 如 a[id=“first”] 选择所有带有ID属性且ID属性值为first的a元素 同样也可以多个属性并写 以缩小选择范围
3. E（attr~=“value”）选择具有attr属性且属性值为用空格分隔的字词列表 其中一个等于value的E元素 如 a[title~=“web”] 选择所有title属性为为空格分隔的字词列表 且其中一个等于value的a元素
4. E (attr^=“value”) 选择具有attr属性且属性值为以value开头的字符串的E元素 如 a[title^=“http”] 选择所有title属性且title属性为以http开头的a元素
5. E (attr$"value")选择具有attr属性且属性值为以value结尾的字符串的E元素如a[title$=“http”] 选择所有title属性且title属性为以http结尾的a元素
6. E (attr*=“value”) 选择具有attr属性且属性值中包含value的字符串的E元素 如 a[title*=“http”] 选择所有title属性且title属性包含http字符串的a元素
7. E (attr|=“value”) 选择具有attr属性且属性值为以value开头的并且用连接符“ - ”分隔的字符串的E元素 如 a[title|=“http”] 选择所有title属性且title属性为 http 或者是以 http- 开头的a元素

伪选择器

伪选择器分为伪类选择器和伪对象选择器 伪选择器能够根据元素或者对象的特征 状态 行为 进行匹配。伪类选择器以 ：号作为前缀标识符 ：前可以添加限定选择符 冒号后为伪类或者伪对象 冒号前后没有空格 如 a:link 为设置超链接a未被访问前的样式 伪类选择器和伪对象选择器有很多。 下面仅介绍几个

结构伪类

1. first-child 如 li:first-child li标签中 选中第一个li
2. last-child 如 li:last-child li标签中 选中最后一个li
3. nth-child 如 li:nth-child(length/n/n+length等) n为0-n开始计算 也可以直接在（）内赋值
4. nth-child 如 li:nth-child(n) 将选中所有的li元素 类似于 li{}
5. nth-last-child 与nth-child 大致相同 只不过 nth-last-child是从后往前算的
6. nth-of-type 只选中P元素 且每隔一个P元素就有不同的样式 与nth-child实现一样 只不过nth-of-type可以指定元素
7. only-child 表示div.post 只有一个p元素时 改变这个p的样式 有两个时 则不改变
8. empty 用来选择没有任何内容的元素，一点内容也没有，包括空格 如 如果有个一p元素为空 则 .post p:empty{display:none} 可以将它不显示

否定伪类

1. :not() 表示否定选择器 即过滤掉not()函数匹配的特定元素 如 not(.class) 排除 .class 的类

状态伪类

1. : enabled 匹配指定范围内所有可用UI元素
2. : disabled 匹配指定范围内所有不可用UI元素
3. ：checked 匹配指定范围内所有可用UI元素

目标伪类

1. E:target 选择匹配E的所有元素 且匹配元素被相关URL指向 只有当存在URL指向该匹配元素时，样式才会有效；比如，当单击页面中的锚点连接 跳转到指定位置的时候表示该元素被相关URL指向 此时才会显示 E:target 设置的属性

CSS特性

1. 继承性 是指后代元素可以继承祖先元素的样式，继承的样式主要包括字体，文本等基本属性 不能继承的有：边框，补白，背景，定位，布局，尺寸等 继承的优先级时最低的
2. 层叠性 是指CSS能够对同一个对象应用多个样式的能力

选择器的优先级

根据权重

1. 标签选择器。权重值为1
2. 伪元素和伪对象选择器。权重值为1
3. 类选择器。权重值为10
4. 属性选择器。权重值为10
5. ID选择器。权重值为100
6. 其他选择器。权重值为10 如通配符选择器

以上权值数乘以个数 最终计算出来的权重按大小确定优先级 权值大优先级大

第十章：使用CSS美化网页文本和图像

设计字体样式

1. 定义字体类型 font-family:
2. 定义字体大小 font-size:
3. 定义字体颜色 color：
4. 定义字体粗细 font-weight:
5. 定义艺术字体 font-style:
6. 定义字体修饰线 text-decoration:(normal:默认值/blink:闪烁效果/underline:下划线/line-through:贯穿线效果/overline:上划线)

text-decoration-line:修饰线位置
text-decoration-color: 设置修饰线颜色
text-decoration-style: 设置修饰线形状（solid double dotted dashed wavy：波浪线）
text-decoration-skip: 设置文本修饰线必须略过内同的哪些部分
text-underline-position：设置对象中下划线的位置

7. 定义字体的变形 font-variant:(nomal:默认值/small-caps：表示小型的大写字母字体)
8. 定义大小写字体 text-transform 属性 ：（none/capitalize：每个单词第一个字母变大写/uppercase：所有字母变大写/lowercase：所有字母变小写）

设计文本样式

1. 定义文本对齐 text-align：（left/right/center/justify：两端对齐） text-align 仅对行内对象有效，如文本，图像，超链接等
2. 定义垂直对齐 vertical-align：（auto/baseline/sub/super/top/text-top/middle/bottom/text-bottom/lenght） 同样仅对行内对象有效
3. 定义文本间距 letter-spacing定义字距 word-spacing定义词距 ：浮点数值或者单位标识符
4. 定义行高 line-height属性 ：nomal（默认值，一般为1.2em） length：浮点数字和单位标识符 允许负值
5. 定义首行缩进 text-indent ：（length）

设计图形样式

1. 定义图像大小 height width
2. 定义图像边框 border（solid实线框/double双线框/groove立体凹槽/ridge立体凸槽/inset立体凹边/outset立体凸边） 边框颜色border-color 边框宽度border-width默认：2-3px 【 border：边框样式 边框颜色 边框宽度 】 定义四条边框不一样【 border-style： 上 右 下 左】
3. 定义不透明度 opacity : 0-1 数值越小，透明度越高。0为完全透明 1为完全不透明
4. 定义圆角特效 border-radius 【length】 12px 50%
5. 定义阴影特效 box-shadow ：【 -webkit-box-shadow：8px 8px 14px #008c8c 】 第一个8px表示阴影的水平偏移值 第二个8px表示阴影的垂直偏移值 第三个14px表示阴影模糊值

第十一章：使用CSS背景图片和渐变背景

设计背景图像

1. CSS用 background-image 属性来定义背景图像 background-image：url（路径） ；
2. 显示方式 background-repeat 取值：repeat-x/-y/ 在横向/纵向/横向纵向上平铺 round 自动缩放以适应整个容器 sapce 以相同的间距平铺且填满整个容器
3. 设置显示位置 默认情况下背景图片会显示在元素的左上角 css用background-position属性来精确定位背景图片 取值有两个值 用来定位x y轴的坐标（left right center top bottom）
4. 设置固定背景 在默认情况下背景图像能够跟随网页内容上下滚动 可以使用background-attachment属性定义在窗口中固定（fixed：相对于浏览器窗口固定 scroll：相对于元素固定 不会跟随元素内容滚动 local：相对于元素内容固定 会跟随元素内容滚动）
5. 设置定位原点 background-origin属性定义了background-position属性的定位原点 默认情况下background-position属性总是根据元素左上角为坐标原点进行定位背景图像 使用background-origin可以改变这种定位方式 属性有（border-box：从边框区域开始希纳是背景/padding-box：从补白区域开始显示背景，为默认值/content-box：仅从内容区域显示背景）
6. 设置裁剪区域 background-clipe 默认值为border-box （从边框区域向外裁剪背景） padding-box(从补白区域向外裁剪) content-box （从内容区域向外裁剪） text（从文字等区域向外裁剪）
7. 设置背景图像的大小 background-size 可以控制背景图像的显示大小 属性值 可以是浮点值，百分比，cover（保持背景图片本身的宽高比例，将图片覆盖所定义背景的区域），contain（保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应所定义背景区域）
8. 设置多重背景图像 CSS3支持同一个元素内定义多个背景图像，还可以将多个背景图像进行叠加显示，从而使得设计多图背景栏目变得更加容易 。 如使用background-origin定义仅在内容区显示背景，使用background-clip属性定义背景从边框区域向外裁剪

设计渐变背景

1. 定义线性渐变 linear-gradient (angle,color-stop1,color0stop2 …) angle 用来指定渐变的方向，可以使用角度或者关键字来设置，关键字包括（to left to right to top to bottom ） color-stop 用于指定渐变的色点 包括一个颜色和起点位置 （起点位置可以是一个具体的长度值，亦可以是一个百分比值 百分比值参考应用渐变对象的尺寸，最终会被转换为具体的长度值） webkit-gradient(linear,point,point,stop)
3. 定义重复线性渐变 使用 repeating-linear-gradient() 函数可以定义重复的线性渐变 用法与linear函数相同
4. 定义径向渐变 创建一个径向渐变至少需要定义两个颜色值，同时可以指定渐变的中心点位置 形状类型 和半径大小 radial-gradient(shape size ai position,color-stop1.color-stop2…) shape用来指定渐变的类型 包括circle（圆形）和ellipse（椭圆）两种 size：如果类型为circle 指定一个值设置圆的半径 如果类型为ellipse 指定两个值分别设置椭圆的x轴和y轴半径 取值包括长度值，百分比，关键字（colsest-side:指定径向渐变的半径长度为从中心点到最近的边 colsest-corner：指定径向渐变的半径长度为从中心点到最近的角 farthest-side：指定径向渐变的半径长度为从中心点到最远的边 farthest-corner：指定径向渐变的半径长度为从中心点到最远的角）position ：用来指定中心点的位置 （如果提供了两个参数 第一个表示x坐标 第二个表示y坐标 如果只提供了一个参数 第二个值默认为50%） color-stop:用于指定渐变的色点，包括一个颜色值和一个起点位置 webkit-gradient(radial,point,radius,stop)
6. 定义重复径向渐变 使用repeating-radial-gradient（）函数定义 用法与radial-gradient() 函数相同

第十二章：使用CSS3美化列表和超链接样式

设计超链接样式

1. 使用动态伪类 a:link （定义超链接的默认样式） a:visited (定义超链接被访问后的样式) a:hover（定义光标指针移过超链接时的样式） a:active (定义超链接被激活时的样式) 正确的顺序为 l v h a
2. 定义下划线样式 text-decoration （underline none） border-bottom （dashed 1px red）
3. 定义特效样式
4. 定义光标样式 cursor （auto,crosshair,default,pointer,move,e-resize,text,wait,help,URL）

设计列表样式

1. 定义项目符号类型 list-style-type 属性可以定义泪飙项目符号的类型，也可以取消项目符号。属性值有 disc（实心圆，默认值） circle（空心圆）square（实心方块）decimal（阿拉伯数字）
2. 定义项目符号图像 list-style-image 属性可以自定义项目符号 该属性允许指定一个外部图像文件
3. 模拟项目符号 background属性可以模拟列表项目符号 1，首先隐藏列表的默认项目符号 2，利用background属性为列表项目定义背景图像，精确定位显示位置 3，同时使用padding-left属性为列表项目定义左侧空白，避免背景图别项目文本遮盖

第十三章：使用CSS3美化表格和表单样式

设计表格样式

1. 定义边框样式 border-collapse （separate边分开 collapse边合并）定义表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开
2. 定义单元格间距 border-spacing （length） 定义当表格边框独立时，行和单元格的边在横向和纵向上的间距
3. 定义标题位置 caption-side （top|bottom）定义表格的caption对象位于表格的顶部或底部，应与caption元素一起使用
4. 隐藏空单元格 empty-cells（show|hide）定义当单元格无内容时，是否显示该单元格的边框

设计表单样式

1. 定义文本框样式
2. 定义单选按钮和复选按钮样式
3. 定义选择框样式

第十四章：使用CSS3排版网页

CSS盒模型

1. 认识 display 属性可以改变元素的显示类型 （none/隐藏对象，inline/指定对象为内联元素，block/指定对象为块元素，inline-block/指定对象为内联块元素） block以块状显示 占据一行，一行只能显示一个块元素 linline以内联显示 一行可以显示多个内联元素
2. 认识CSS盒模型 内容（content） 填充（padding） 边框（border） 边界（margin）
3. 定义边界 margin-top margin-right margin-bottom margin-left >> margin可以取负值
4. 定义边框 border-top border-right border-bottom border-left border-style border-color border-width
5. 定义补白 padding padding-top/left/bottom/right

设计浮动显示

1. 定义 float （none/left/right）
2. 使用 clear 属性 可以强制浮动元素换行显示 （none：允许两边都有浮动对象/left：不允许左边有浮动对象/right：不允许右边有浮动对象/both：不允许有浮动对象）

设计定位显示

1. 定义 position （static：无特殊定位，对象遵从正常文档流，top/right等不会被应用/relative：对象遵循正常文档流，但将依据top/right等属性在正常文档流中偏移位置/absolute：对象脱离正常文档流，使用top/right等进行绝对定位，其层叠顺序通过z-index属性定义/fixed：对象脱离正常文档流，使用top/right等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随之滚动） 与position属性相关联的四个定位属性：top/right/bottom/left
2. 设置重叠顺序，不管是相对定位，固定定位，还是绝对定位。只要坐标相同都可能存在元素重叠现象，在默认情况下，相同类型的定位元素，排列在后面的定位元素会覆盖前面的定位元素 使用z-index属性可以改变定位元素的覆盖顺序 z-index取值为整数，数值越大就越显示在上面

第十五章：设计CSS3伸缩布局和响应布局

多列布局

1. 设置列宽 column-width （length/auto） 定义单列显示的宽度
2. 设置列数 column-count （integer：整数值/auto） 定义显示的列数
3. 设置间距 column-gap （length/normal）定义两栏之间的距离
4. 设置列边框 column-rule （style/width/color） 定义每列之间边框的样式，宽度，颜色
5. 设置跨列显示 column-span （none：不跨列/all：横跨所有列） 定义跨列显示
6. 设置列高度 column-fill （auto：自适应/balance：所有列的高度与其中最高的一列统一） 定义栏目的盖度是否统一

新版伸缩盒

1. 认识 Flexbox 伸缩盒模型是一个新的盒子模型 由 主轴 主轴起点 主轴尺寸 侧轴 侧轴起点 侧轴尺寸 一个伸缩项目就是一个伸缩容器的子元素，伸缩容器中的文本也被视为一个伸缩项目 伸缩项目中的内容与普通文本流一样。例如，当一个伸缩项目被设置为浮动，用户依然可以在这个伸缩项目中放置一个浮动元素。
2. 启动伸缩盒 display:flex|inline-flex 可以定义一个伸缩容器 设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。此时CSS的column属性在伸缩容器上没有效果 同时float clear vertical-align属性在伸缩项目上也没有效果
3. 设置主轴方向 使用flex-direction属性可以定义主轴方向 它适用于伸缩容器 （row：主轴与内轴方向作为默认的书写模式，即从左往右/row-reverse：对齐方式与row相反/column：主轴与块轴方向作为默认的书写模式，即从上往下/column-reverse：对齐方式与column相反）
4. 设置行数 flex-wrap 定义伸缩容器是单行还是多行显示伸缩项目，侧轴的方向决定了新行堆放的方向 （nowrap：单行，可能会溢出容器/wrap：多行溢出部分会被放置到新行，子项内部会发生断行/wrap-reverse：反转wrap排序）

flex-flow 属性是复合属性 （ direction / wrap ） 可以同时定义伸缩容器的主轴和侧轴 默认值为 row / nowrap

5. 设置对齐方式 主轴对齐 justify-content 定义伸缩项目沿着主轴线的对齐方式（flex-start：默认值，向一行的起始位置靠齐|flex-end：向一行的结束位置靠齐|center：向一行的中间位置靠齐|space-between：伸缩项目会平均地分布在行里，第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置|space-around：伸缩项目会平均地分布在行里，两端保留一半的空间） 侧轴对齐 align-items 定义伸缩项目在侧轴上的对齐方式 （flex-start：起始的边|flex-end：终点的边|center：居中位置|baseline：基线对齐|stretch：默认值，伸缩项目拉伸填充整个伸缩容器） 伸缩行对齐 align-content 定义伸缩行在伸缩容器里的对齐方式，该属性适用于伸缩容器，类似于伸缩项目在主轴上使用justify-centent属性一样，但本属性在只有一行的伸缩容器上没有效果 （flex-start：起点位置堆叠|flext-end：结束位置堆叠|center：中间位置堆叠|space-between：各行在伸缩容器中平均分布|space-around：各行在伸缩容器中平均分布，在两边各有一半的空间|stretch：默认值。各行将会伸展以占用剩余的空间）
6. 设置伸缩项目 显示位置 order 属性可以控制伸缩项目在伸缩容器中的显示顺序 （integer：整数 数值小的排前面，可以为负值） 扩展空间 flex-grow（number：扩展比例，默认值为0） 可以定义伸缩项目的扩展能力，决定伸缩容器剩余空间按比例应扩展多少空间 收缩空间 flex-shrink（number：收缩比例，默认值为1） 可以定义伸缩项目的收缩能力 伸缩比例 flex-basis（length：用长度值来定义宽度|percentage：用百分比来定义宽度|auto：无特定宽度值，取决于其他属性值|content：基于内容自动计算宽度） 可以设置伸缩基准值，剩余空间按比率进行伸缩 对齐方式 align-self （auto|flex-start|flex-end|center|baseline|stretch）

媒体查询

1. 认值 @media 定义媒体查询 @media[only|not]?<media_type>[and]|[and] { }

media_type 指定媒体类型 expression 指定媒体特性，放在一对圆括号中 逻辑运算符and,ont ,only等

第十六章：设计CSS3动画

设计变形动画

1. 设置变形原点 原点默认为对象的中心点（50%，50%） 使用transform-origin 属性可以重新设置新的变形原点 【percentage|length|left|center|right】【percentage|length|top|center|bottom】 percentage:用百分比指定坐标值，可以为负值 length:用长度值指定坐标值，可以为负值 left:指定原点的横坐标为center right:指定原点的横坐标为right top：指定原点的纵坐标为top bottom:指定原点的纵坐标为bottom
2. 定义2D旋转 rotate（） 函数能够在2D空间内旋转对象 （angle） angle表示角度值，取值单位可以是：度（deg），梯度（400grad=360deg），弧度（1.57rad=90deg），圈（1turn=360deg）
3. 定义2D缩放 scale（）函数能够缩放对象大小（number，number）两个参数分别定义宽度和高度的缩放比例 如果取值为正值，则基于指定的宽度和高度放大或则缩小对象 如果取值为负值，则不会缩小元素 而是翻转元素，然后再缩放元素 如果取值小于1的小数 ，可以缩小元素 如果第二个数省略，则第二个参数等于第一个参数
4. 定义2D平移 translate（）函数能够平移对象的位置（translate-value,translate-value）两个参数分别定义对象在X轴和Y轴相对于原点的偏移距离，如果省略参数则默认值为0，如果取负值，则表示反向偏移，参考原点保持不变
5. 定义D倾斜 skew()函数能能够倾斜显示对象 (angle，angle) 两个参数分别用来定义对象在X轴和Y轴倾斜的角度 如果省略参数 则默认为0 与rotate（）函数不同 rotate（）函数只是旋转对象的角度，而不会改变对象的形状，skew()函数会改变对象的形状
6. 定义2D矩阵 matrix（number，，，，，，）是一个矩阵函数，它可以同时实现缩放，旋转，平移，和倾斜操作 第一个参数：控制X轴缩放 第二个参数 控制X轴倾斜 第三个参数控制Y轴倾斜 第四个参数控制Y轴缩放 第五个参数 控制X轴平移 第六个参数 控制Y轴平移
7. 定义3D平移 translatex：指定对象X轴的平移 translatey：指定对象Y轴的平移 translatez指定对象Z轴的平移 translate3d：指定对象的3DD平移 参数translation-value 表示length和percentage 即X,Y轴可以去长度值和百分比 但是Z轴只能取长度值
8. 定义3D缩放 scalex：X轴缩放 scaley：Y轴缩放 scalez：Z轴缩放 scale3d：3D缩放 参数不能省略 参数number为缩放倍数
9. 定义3D旋转 rotatex：x轴旋转角度 rotatey：y轴旋转角度 rotatez：z轴旋转角度 rotate3d：3d旋转角度 如rotate3d(1,0,0,a) = rotatex(a)

设计过渡动画

1. 设置过渡属性 transition-property 属性用来定义过渡动画的CSS属性名称 （none:表示没有元素，all：默认值，表示针对所有元素，IDENT：指定CSS属性列表，几乎所有色彩，大小或位置相关的CSS属性）
2. 设置过渡时间 transition-duration属性用来定义转换动画的时间长度 (time（s）) 初始值为0，适用于所有元素
3. 设置延迟过渡时间 transition-delay属性定义开启过渡动画的延迟时间 （time（s））初始值为0 适用于所有元素
4. 设置过渡动画类型 transition-timing-function属性定义过渡动画的类型（默认值为ease：平滑过渡）linear：线性过渡 ease-in：由慢到快 ease-out:由快到慢 ease-in-out：由慢到快再到慢 cubic-bezier：特殊的立方贝塞尔曲线效果
5. 设置过渡触发动作 一般通过动态伪类触发 :link :visited :hover :active :focus

设计帧动画

1. 设置关键帧 @keyframes 定义关键帧 animationname:定义动画的名称 keyframes-selector：定义帧的时间未知，也就是动画时间长的百分比 css-styles 表示一个或多个合法的CSS样式属性
2. 设置动画属性 animation-name 定义CSS动画的名称 初始值为none 定义动画时间 animation-duration （time） 定义动画类型 animation-timing-function 定义延迟时间 animation-delay 定义播放次数 animation-iteration-count （number|infinite：无限次） 定义播放方向 （alternate|normal|alternate） 定义播放状态 animation-play-state 定义动画正在运行 还是暂停 初始值为running 定义播放外状态 animation-fill-mode （none：不设置对象动画之外的状态|forwards：设置对象为动画结束时的状态|backwards：设置动画为开始时的状态|both：设置对象为开始或结束的状态）

原文地址：https://www.qianqianhaiou.cn/index.php/archives/4/