CSs概述
cascading style sheets 层叠样式表 简称为样式表 2.作用 用来去设置html网页元素的样式
css与html的关系 html是标记 是搭建网页主体结构的·内容 是 内容的展示 css是负责修饰页面内容 即负责修饰页面的样式 尽量用css属性去替代html的属性
1.内联样式：即是行内样式 <any style=' color：red'></any> 样式申明 就是由样式的属性名称和值组成
属性名称与值之间用 冒号连接
常用的样式：用来设置文本颜色的属和值 属性：color 只要是合法的颜色值
设置文字的大小 以px或p为单的大小
内控样式 ：网页的头元素中去增加一对style标记 在·style中去声明该网页的样式
选择器是什么 专门用来规范页面哪些元素能够去使用声明好的样式 就是把声明好的样式给元素 有选择器决定
基础选择器：元素选择器 指的就是由元素的名称来作为选择器的
选择器{
样式的声明
}
写在头元素中
外部样式 在。css外部文件中声明文件规格
使用步骤：1.创建样式表文件
2.在样式表中创建样式规格 3.
在网页中去对样式引入
css的样式特征：
1.继承性；
必须是父子结构，即层叠关系 大部分的css的样式 是可以被直接继承的
css的样式特征
不仅仅限于一级嵌套 也可以是多嵌套
2.层叠性：
给一个元素去定义多个样式规格
如果不冲突，name可以同时应用到当前格式
默认优先级 由低到高
浏览器和默认级别低 外部和内部就近原则；
即内联样式 行内样式 优先级最高
！important原则 显示优先级 样式属性：值 ！important ； 这个值一定优先使用
选择器：css中基础选择器
规范了页面中哪些元素能够使用声明好的样式
用来匹配页面所有元素的选择器叫做通用选择器
*{样式声明} 效率低 尽量少用 用body{}
只匹配页面中的某一种或某一类元素
3.类选择器 ：定义页面上某个或者某些元素的样式 是公共样式 声明.名称类名 {样式声明} 注意：1
点不能省略 2.类名称不能以数字开头3.不能包含特殊字符
_ -可以包含 多个类名用空格 连接
id选择器 设置指定id元素的样式 #id{样式声明 }
群组选择器 将多个选择器放在一起进行样式的选择声明
选择器1，选择器2，选择器3{样式声明}
4.后代选择器
通过元素的后代关系来匹配元素
也就是数哦嵌套关系 一级或者是多余一级的嵌套关系 语法结构 选择器1 选择器2{样式声明} 多级嵌套
一级嵌套是子代选择器 用>号连接
伪类选择器
:link访问之前
：visited访问之后
：hover悬停状态
：active点击状态
：focus匹配元素获取焦点的状态
权值标识当前选择器的重要程度 权值越大 优先级越高 元素选择器1 类选择器10 伪类10 id100 内联 1000
i 选择器的·权值加在一起 大的优先 如果 相同 则以 靠近的·为主
尺寸与边框：
px,pt：一般描述文字的大小
in英寸
1in=2.54cm
pt磅值 1pt=1/72 in 1p=2.54/72cm
cm mm em相对于父元素去乘以倍数 rem相对于根元素的字体大小乘以倍数 即是相对于body或html 一般做移动端来控制 %相对于父元素来说所占的百分比
描述颜色的取值 ：
1.颜色的英文单词
2.rgba rgb（r,g,b,a） 0-255之间的数字 rgb里也可以加% a取值是0-1之间的数字 1是无透明度·
3. 十六进制的表示方法
#cccc #
#rrggbb 0-或a-f组成
直接用#rgb
2.尺寸的属性
作用：改变元素的看度和高度
width min-width
max-width
height
min-height
max-height
块及元素：div p span h1 ul ol dl header ....结构标记
行内块元素： 表单控件 除了单选按钮和复选框之外 其他的都可以设置尺寸
本身具备width和height属性的元素
image
大部分的行内元素都无法修改尺寸
关于溢出的处理
当内容多二区域小就会产生溢出 默认溢出方向都是纵向 属性：overflow; overflow-x;overflow-y; 第一个同时处理xy 方向的
取值：visible 可见的 溢出可见
hidden隐藏 溢出的内容全部隐藏起起来
3.scroll 滚动溢出时出现滚动条
4.auto 自动 指的是溢出的·1时候自动出现滚动条
一般用的最多的是auto
border的width指的是边框的·宽度 以px为单位
style用来描述边框的样式
取值：solid dotted虚线 dashed虚线 断断续续仙桥
color指的是边框的颜色 特殊的颜色：transparent 透明的
取消input边框 border值为none或为0
设置单边框
只设置某一条边框的属性 border-top，bottom，left，right
单属性的设置 ：指的是设置一条边的某一个属性
border-width/style:solid/color/
修改四条边样式为dashed
border-top-color:red 定义某一条边的某一个属性
边框boreder-radius 指将元素的四个直角可以倒成圆角
取值：以px为单位的数值
单角设置border-top-left
边框的阴影 属性：指的是box-shadow ；取值：h-shadow:表示阴影在水平方向的偏移距离 是个必须值 取值可为证未负向左偏移，v-shadow：垂直方向，指阴影在垂直方向的偏移值是必须值 正表示下 负表示上 blur：描述阴影的模糊的距离 取值越大 模糊的效果越明显 一般情况都是px为单位的数值 spread描述阴影的尺寸 即大小 指定要在阴影的基础上扩充出来的距离color阴影的颜色 inset ：将默认的外阴影改成内阴影效果
7.轮廓：指的是边框的边框
pre是预格式化
块及元素垂直外边距相遇 合并以大的值为主 行内元素 外边距溢出 父元素没有上边框 可能会
第一个子元素的位置增加<table>
padding会改变边框所增加的范围
box-sizing：border-box默认框模型计算方法啊
content-box默认的计算方式
border元素的尺寸包含border以及padding的值
占地 width+margin width包含了border和padding
background-color：专门定义背景色
背景颜色默认从边框位置开始填充
background-image：url（）；
background-repeat norepeat
repeat默认平铺 repeat-x横向平铺
repeat-y 纵向平铺
no-repeat 不平铺
图片大小 background-size：width height
100% 专门设置背景图像的大侠
cover 取值是覆盖的意思 将图片等比放大 直到背景图完全覆盖到所有区域 为止
contain包将背景图进行等比的放大 直到背景图喷到某一个边缘为止
5.背景图像的固定
属性 background-attachment将背景图固定在某个人位置 一直定在可视化范围内 取值：fixed 默认scroll
改变背景图在元素中的位置 ：background-position
取值方式：1.relative
2.absolute
3.fixed
1.x y x水平方向的偏右 取值为证 向右偏移 y垂直偏移 取值为证 向下偏移
可以取值为%比或者px
margin-right=
7.背景属性的简写方式 backgroung： color url repeat attachment position
注意 如果不设置其中某个值的话 该位置 将采用默认值 三、渐变填充
1.渐变：指的是多种颜色平缓变化的变换效果
色标：一种颜色及其出现的位置 一个渐变一般都是有多重色标组成
分分类：1.线性渐变 以直线的方向来填充渐变色
2.径向渐变 以圆形的方式来实现填充效果
3.重复渐变 将线性渐变和径向渐变重复几次来实现渐变效果
线性渐变：属性background-image：
取值：关键词 linear线性-gradient剃度（angle，color-point1）
angle的取值：to top 从上下向上去进行填充渐变 2.to bottom从上到下 to left to right 从左向右来填充渐变 2.可以用具体角度值 0deg 0度 相当于to top
.color-point ：指的是色标 表示得是颜色以及位置的组合 中间用空格隔开
red 0% 在填充位置的开始处为个红色
green %50 到填充一半的位置处颜色为绿色
blue 200px 到填充方式向的200px的位置处颜色变为蓝色
径向渐变 background-image
取值 ：radial-gradient （[size at position],color-point1） size表示圆的半径 以px为单位的数字 position圆心的位置
1.具体数字：xy
2.x%，y%：元素宽的高的占比
3.可以用关键词 left center right y top center. bottom
background-image:repeating-linerar-gradient（angle，color-point）
径向渐变 background-image:repeating-radial-gradient（size at position，color-point）
重复时color-point一定要给绝对数字加颜色单位
webkit谷歌兼容性处理
在低版本浏览器中加前缀：
对于不支持的浏览器可以增加浏览器前缀 来让浏览器增加前缀 chrome/safari:-webkit-
firefox:-moz-
opera:-a-
ie:-ms-
4.文本格式化的属性 ：
1.字体的属性：font-family：取值是去指定字体的类型 一般用逗号隔开 '微软雅黑'，‘Arial’，‘宋体’，'黑体'
font-size:字体小 取值一般是px为单位的数字 或pt
3.字体加粗情况
font-weight ：bold 加粗 正常normal 3.value值：是具体的数字 没有单位 400-900整百倍
字体的样式 font-style：normal italic 《i》
小型的大写字符 指的是将小写字母变为大写 1
大小于小写字母一致 font-variant 取值：normal
2.small-caps；
6.简写形式 ：
字体属性的简写 ；属性font： style ，variant weight size family
注意;使用简写形式必须要设置family值 你否则无效
格式化的属性：1.color属性 合法的颜色值
2.文本的排列方式 指的是水平方向
tex-align：center left right /justify(表示两端对齐)
设置行内或者行内块
3.线条修饰 ：
text-decoration：none ； 无任何的线条修饰 2.普通的文本 下划线· underline 下划线 上划线 overline line-through
4.line-height
定义一行文本所占的高度 有一个特点是行高大于文字本身的大小那么该函行文本将在指定的横线内呈现一个垂直居中的效果 line-height
取值是以px为单位的数字
一般设置行高和div盖度一致
4.首行文本缩进
text-indent 取值是以px为单位的数字
文本阴影 text-shadow 取值 h-shadow v-shadow blur color
表格的属性修饰
vertical-align：单元格中数据的垂直对齐方式 top/middle/bottom
表格中除了margin之外都适用
表格里面特有的睡醒
css里面设置表格的特有属性
边框合并
border-colapse
默认情况下是分离边框的模式
sparate collapse 表示边框合并
边框边距 border-spacing 是用来设置单元格与单元格之间或者是单元格与表哥之间的距离
给定一个值表示水平和垂直相同
若是两个值 第一个表示水平间距 第二个表示垂直间距 若要设置边距必须在边框分离的情况下才能起作用 不然没有任何作用
表格标题
位置是在表格的上方
caption 表示标题
属性 caption-side 取值 top 下方bottom
关于表格显示规则的属性 指的是用来帮助浏览器
来指定如何布局一张表格
也就是指定单元格的计算方式i
table-layout：fixed 来固定表格的布局 单元格td的尺寸由已设定的值为准
1.定位：指的是去改变元素在页面中默认的位置
定位的效果分类：
1.普通流定位 指的是元素默认的显示方式
又称文档流定位
2.浮动定位 相对定位 绝对定位 固定定位
每个元素默认都是从其父元素的左上角开始显示
块及是由上到下排列 并且每个元素独占一行 行内块元素嗾使按照从左到右的顺序进行排列的
一旦元素浮动起来 它将不占页面空间 脱离了原本的定位方式 即是脱离了文档流定位 其他的元素会向前补位
浮动元素会停靠着在=再父元素的左边或右边 或其他已经浮动元素的边缘
float：left/right
left:停靠在父元素的左边或者·停靠在左边已经浮动的元素 当父元素显示不下浮动元素 将会换行 有可能被卡主
2.元素一旦浮动 他的宽度将以内容为主 前提是未指定宽度 元素一旦浮动起来 行内元素将变成块及
能设定尺寸 并且可以正常的设定垂直外边距
文字包括行内元素包括行内块元素，不会被浮动元素压在下边
3.如何清除浮动岁其他元素的影响
即是后续元素会上前补位
若后续元素不箱站位 可以通过清除浮动的方式来解决这个问题
clerar：left 清除当前元素前面元素带来的影响
right both
默认值：none
子元素一旦浮动起来 父元素高度就会在不设定的情况下 等于0
元素的高度都是以未浮动的高度为准
解决方案：1
给父元素设定高度 缺点：不是每一次都知道父元素的固定高度
2.设置父元素也浮动 缺点：不是任何时候父元素都需要浮动
3.位父元素设置over flow
如果没有溢出内容可以实现 如果有内容需要溢出显示就会一同被隐藏起来
4.在父元素里去追加一个空标记 指的是父元素最后一个子元素位置处 追加元素最好是块及元素 社会中clear：both 无论什么情况都不会影响别人
显示方式的改变 ：
显示方式就是 决定了元素在页面中的表现形式 （块及 行内 行内快 table ）
属性:DISPLAY
取值：none 不显示元素 -相当于隐藏元素
block：块级 表现的与块级元素一致 3.inline行内
让元素表现的与行内元素一致 并且
inline-block让元素表现的与行内快一致 允许修改尺寸
多个元素在一行里显示 可以修改高宽
table：让元素表现的与表格一致 尺寸实际上以内容一致 本身具有高宽属性 显示效果的设置：
显示/隐藏 属性 visibility
取值：visible默认值 默认元素都是可见的
hidden隐藏
实现隐藏的方式 display：none
visibility：hidden 这个情况隐藏依然占据页面空间 不会脱离文档流 依然占据页面空间
display：none 不占据页面空间 会脱离文档流 不占据页面的空间
3.opacity：透明度
取值1.0-1.0之间的小数 越靠近0越透明
opacity除了作用于元素以及元素内容的透明度
而rgba只做用于背景颜色或者是只作用于文字颜色 只是单一透明度的设置
4.垂直对齐方式
属性：vertical-align：
适用场合：表格中使用 top middle buttom
图片的对齐 ：控制图片两边的文本垂直对齐方式
取值：top middle bottom baseline默认的基线对齐 用于图片与文字对齐方式
光标的设置
改变鼠标悬停在元素上时 鼠标的状态
属性：cursor
1.default：箭头
2.pointer 小手
3.crosshair 十字准心
4.text：表示文本文档 I
5.wait 等待
6.help：帮助文档
列表：list-style-type:用来修饰列表项的标识
1.none 2.disc 3.circle 4.square
list-style-image 取值url（图片路径 ）
3.列表项的位置 list-style-position ：取值1
outside在外边的 将标识放置于内容区之外 inside 将标识放置于内容区之内
4.简写形式 list-style：none 简写 type标识 url position
可以通过列表横向排列·
定位：
position
相对定位：取值relative
1.什么是相对定位：指的是元素相对于他原来的位置去偏移某个距离 相对于元素自己 使用场合：元素位置的微调 时使用 position：relative 必须要配合偏移属性一起使用实现位置的微调
绝对定位 取值绝对定位 absolute
固定定位 fixed
4.static静态的 指的是元素的默认选择方式
配合偏移属性 数字加单位 top buttom left right
top：150；一般情况下往下移动 left150px 元素向右移动 right：150px 向左移动
绝对定位：
1.语法position:absolute;
配合偏移属性使用 实现位置的修改
1使用场合 有堆叠效果的元素
2.弹出菜单 默认情况父元素未定位得话 直接找body
#d1:hover #d2{
display:block
}悬停显示子元素 hover以前 display：none =》display：none
绝对定位元素会相对于 离他最近的已定位的祖先元素 去实现位置的初始化 没有已定位的祖先元素 那么这个元素相对于body实现位置的初始化 绝对定位的元素会脱离文档流 不占用页面里空间
堆叠顺序：
z-index改变堆叠顺序 所有的已定位元素 可能出现堆叠效果
如何改变对的顺序 取值：无单位数字 数字越大 就越靠上 如果父子关系 index也无法改变顺序
position：fixed 配合偏移属性使用
fixed可以将行内转化为块及
固定定位的元素会变成块及 也就是可以修改尺寸 fixed定位只是相对于 body 永远相对body实现位置的初始化 脱离了文档流 不占页面空间
css3高级
1.兄弟选择器 ：指的是具备相同父元素的平级元素
1.相邻兄弟选择器 语法选择器1+选择器2 {样式声明}
都一律只能向后找 不能向前找 只找一个
2.通用兄弟选择器：元素后的所有兄弟
选择器1~选择器2{样式声明}
属性选择区
属性作用：指的是允许去通过元素所附带的元素属性及值去匹配元素 语法：基本用法
[attr]
匹配页面中所有附带attr的元素 【】【id】匹配页面中所有附带ID的元素
element(attr) element任意元素 attr人艺术性 div【class】 div[class]
[attr1][attr2] [id][class]表示同时附带id和class属性的元素 可以是多个属性
[attr=value]匹配attr值为value 的元素 [id=d1]相当于 id选择器
3.伪类选择器 ：
链接伪类：link visited 动态伪类：hover active focus
锚点 目标伪类：突出显示激活锚点元素 匹配被激活的锚点 点击锚点转换后就是宝激活状态
语法：选择器 ：target {样式声明}
2.结构伪类：通过元素的·1结构关系来匹配元素
1.：first-child 匹配的是元素时属于其父元素中的第一个子元素 p:first-child
2.last-child:属于其父元素中的最后一个子元素
P:last child{}
3.:nth-child(n)匹配的是属于其父元素里第n个子元素 nth-child(2):
tr:nth-child(2) td:nth-child(3){
background:pink;
}表示第二行 第三列
4empty
：empty 匹配没有子元素的元素
注意：必须为空 没有任何内容
5.only-child：匹配的元素是属于其父元素里得唯一的子元素
否定伪类 ：将满足指定选择器的元素排除在外 ：not
(selector){样式}
table td:not(:first-child){
color:blue;
font-size:30px;
}排除第一列的字体加粗
伪元素选择器
1.：first-letter或 ：：first-letter 作用匹配的是某个元素的首个字符 first-line用来匹配某个元素的首行
首字符选择器高于首行选择器
3.选取中内容的背景颜色 ：：selection 作用就是 匹配被用户选取的内容
注意：只能去修改背景颜色和字体的颜色 div：：selection{
background：
color：
此地方的伪元素必须是双：：
}
内容生成：指的是使用css动态的向元素中插入一段内容
使用伪元素选择器生成
：：before 匹配到某元素·内容区域之前 ：：after 匹配到某元素·内容区域之后
配合属性使用 属性content 用来去想要匹配到的位置处去增加内容 增加的内容写在content.属性里 取值 字符串 2.动态的插入图片的路径url
伪元素解决外边距溢出 ：给子元素加margin 影响到父元素 父元素第一个子元素处加table
空table标记可以用 父元素：before来代替 父元素：before即是 父元素内容的前面
解决浮动使父元素失去高度问题的影响：
给最后一个父元素的资源素处加个块元素 清除浮动
父元素：afte
r{
display：block；
content：‘’；
clear：both；
}
弹性布局：主要解决某元素中子元素的布局方式 为布局提供最大的灵活性
弹性布局概念：
1.弹性布局容器
子元素的父元素叫做容器
资源素叫做项目
2.弹性布局的项目
横轴 有起点有终点 叫做主轴 左到右 纵轴叫做交叉轴 上到下
3.主轴指的是项目排列方向的轴
交叉轴：与主轴垂直交叉的轴叫做交叉轴
有关弹性布局的属性的设置：
弹性布局的容器相关的舒心
弹性：flex
取值display：1.flex 将块及元素变为容器 2.inline-flex 将行内元素变为容器
做布局时会自动分配空间
元素变成容器的话 容器的text-align.属性将会失效
元素变为容器后 子元素的浮动属性将会失效
clear属性及垂直对齐方式也失效了；
有关容器的属性： 1.flex-direction 指定容器的主轴以及他里面的排列方向 row 默认值 即主轴为x轴 起点默认在左边 row-reverse 起点进行反转 主轴为x起点在右边 取值纵向：column 主轴在 column-reverse 起点在底部
flex-wrap：作用 当一个主轴排列不下所有普项目时
1.nowrap：默认值 空间不够吧项目缩小 也不换行
wrap一旦显示不下自动换行
换行并且反转：wrap-reverse； .
flex-flow：同时指定排列顺序和换行 1. row nowrap；
4.justify-content 定义项目在主轴的对齐方式
取值：flex-start 左 在主轴的起点对齐
flex-end 中 在主轴的终点对齐 center 居中对齐
space-between 两端对齐的效果
space-around 指的是每个项目两端的间距相同
以上属于水平方向的对齐方式
align-items 指的是子项的交叉轴上的对齐方式
取值：flex-start：交叉轴的起点对齐 flex-end交叉轴上的终点对齐 center 交叉轴上中间对齐 baseline 交叉轴上的基线对齐
stretch：若项目即子元素未设置尺寸 在交叉轴上占满父元素的空间
项目的属性：只能去控制某一个项目 不是对整个项目修饰 不影响别的项目和容器
1.order 顺序： 值越小的话 就越靠近起点 默认情况下是0 取值方式是无单位
2.flex-grow 定义项目的放大比例 当容器有足够的剩余空间 项目将按指定的比例进行放大 整数的数字 无单位 默认值是0 取值越大 占的剩余空间就越多
flex-shrink 项目将按照指定的比列去缩小 默认值为1 空间不足的话等比缩小 默认值为1 取值0的话不缩小 值越大 缩小的比例就·越大
align-self：用来控制单个项目在交叉轴上的对齐当时
取值：flec-start flex-end baseline stretch auto 自动继承父元素的align-items
转换：对页面中的元素实现
改变元素在页面中的位置 大小 角度 或形状 这样的方式叫做转换
2d转换 ： 在x轴和y轴上发生的转换效果
3d转换：xyz轴上的转换
有关转换的属性
transform：
取值：1.none 无效果
translate-function 表示一个或者是多个转换函数 多个的话中间要用空格隔开
2.转换原点
属相；transform-origin 取值：数值/百分比 /关键词 2个值：表示的原点是在x轴和y轴上的位置
3个值得话 表示原点在xyz轴上的位置
默认原点都在元素的中心位置处 center center /50% 50%
2d转换：
1. 位移：改变元素在页面中的位置
属性：transform
取值 translate（x）指定元素在x轴上的位移距离 取值正负都可以 取值为证向右移 反之向左
translate（x，y） 表示指定元素在xy轴上的唯一距离 y正向下移 y负 向上移 translateX （x） translate Y（y）只能给一个值
实现缩放的是scale（value值）value表示横向或者是纵向的缩放比例 默认值是1 放大大于1 缩小小于1
如果是负数是放大 将水平和垂直方向都翻转180度
scale（x,y）x表示横向放大比例 y表示纵向的放大比例
也可以进行单项 缩放 scale-x（）scale-y（）
旋转 ：改变元素在页面中的角度
transform：rotate 取值为正顺时针旋转 取值为负 逆时针旋转 旋转是会连同坐标轴一起旋转 一定会影响旋转后的位移效果
角度倾斜：
改变元素在页面中的形状
语法 属性：transform skew（）
skewX （deg）元素向着x轴产生倾斜的效果 实际上改变的是y轴的角度 x为证是y轴逆时针 负为顺时针或skewY（deg） 让y轴产生倾斜 改变的是x的角度 y取值为正x顺时针 y为负逆时针
skew（x,y）双轴倾斜
4.如何在网页中实现3d的转换
透视距离：模拟人的眼睛到3d元素之间的距离
属性
perspective 该属性应该加在3d转换元素的父元素上
3. 3d旋转 transform 取值 rotateX（ndeg）指的是以x为中心实现旋转
rotate（y）以y.轴为中心旋转的角度
rotateZ（deg） 以z轴为中心去旋转元素角度 方向盘 摩天轮
rotate3D（x，y，z，ndeg） xyz取值大于0的时候 表示该轴参与旋转 如果取值为0 则不参与旋转
实现转换：过渡
1.指的是使用css的属性将他的值在一段时间内去平缓变化的一个效果 把这个效果叫做过渡
指定过渡属性 ：通过transition-property：取值1.具体属性的名称 transition-property：background； 指定哪个属性值在变化的时候需要使用过渡的效果来体现
all代表所有能体现过渡的属性
允许摄制1过渡效果的属性：所有跟颜色相关属性
2.取值为数字的属性
3.转换属性：位移 倾斜
4.渐变
4.visibility 显示/隐藏
6.阴影属性
一般用all
2.指定过渡的时长 即指定咋多长时间内去完成过渡操作
trasition-duration： 以秒或毫秒为单位的数字 1000ms=1s
3.指定速度的时间曲线函数
transition-timing-function用来指定过程变化 1.ease慢速开始 快速变快 慢速结束 linear：匀速
ease-in慢速开始 加速结束 ease-out 快速开始慢速结束 ease-in-out 慢速开始和结束 中间是先加速 后减速 指定过渡的延迟时间 transition-delar ：秒或毫秒为单位的数字
注意：过渡属性的编写位置会影响最后的效果 如果将过渡属性放在元素声明样式里 既要管回又要管去 若放在触发操作中就只管去不管回
简写方式：transition：property duration timing-function delay ；
属性时间必须写 其他=可以不写
css hack:兼容性处理
c3高级动画
属性：什么是动画：使元素从一种样式逐渐去转换到另一个效果 是将多个过渡效果放再一起 让他连贯
通过关键帧实现 通过他控制动画的实行
关键帧·：
1.动画的时间点
2.在改时间点上的样式改变
二、动画相关的使用
1.声明动画 为动画起名 同时定义关键帧
2.为元素去调用动画 指定元素调用动画名称
通过参数控制动画
声明动画的具体方式： @keyframes 动画名{
0%{动画开始时元素的样式}
100%{画执行完成时元素的样式}
}
animation-name：name
duration
动画执行得速度 timing-function:ease.ease-in ease-out linear
速度曲线函数：animation：delay 动画的延迟 取值也是以秒或毫秒为单位
infinite 无限次播放
animation-iteration-count:10;
6.animation-direction：normal； 默认的正常效果
reverse 逆向播放
alternate轮流播放 奇数正向 偶数逆向
简写方式：animation ：name duration timing-function delay iteration-count direction 前面两个必须给
状态属性：animation-fill-mode播放前和播放后的状态 backwards
动画播放前延迟时间内动画保持在第一帧的状态上
forwards；动画播放后将保持在最后一帧的状态上
3.both forward和backwards都有
暂停或播放的属性
animation-play-state：指定动画是属于播放还是暂停的状态上
取值： 1.paused暂停 running播放
{over-flow:hidden;
text-over-flow:ellipsis;
white-space:nowrap;
}
