版权声明： https://blog.csdn.net/weixin_39892293/article/details/79108403
####4.初识CSS####
##4.1##
4.1.1CSS的基本语法结构
行内样式，在html标签中直接使用style属性设置css样式
<h2 style="color: red;font-size: 12px;"></h2>
内部样式表，把css代码写在head的style标签中
<style type="text/css">
h3{
color: #090;
}
p{
font-size: 16px;
color: red;
}
.green{
font-size: 20px;
color: green;
}
.red{
font-size: 30px;
color: red;
}
</style>
外部样式表，把css代码保存为一个单独的样式表文件，文件扩展名为.css，在页面中引用外部样式表即可。html文件引用外部样式表有两种方式，分别是链接式和导入式。
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
4.1.2css3的基本选择器
1.标签选择器
标签{}
2.类选择器
.类名{}
class="类名"
3.id选择器
#id名{}
id="id名"
同一个id属性在用一个页面中只能使用一次，类选择器可以使用多次
4.1.3优先级
就近原则
id选择器>类选择器>标签选择器
##4.2高级选择器##
4.2.1层次选择器
1.后代选择器 E F
作用：选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 div p{ }
2.子选择器 E>F
作用：选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 div>p{}
3.相邻兄弟选择器 E+F
作用：选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 .active+p{}
4.通用兄弟选择器 E~F
作用：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 .active~p{
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active~p{
background: red;
}
</style>
</head>
<body>
<div>
<p >1</p>
<p class="active">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
<p>7</p>
<p>8</p>
</div>
</body>
</html>
4.2.2结构伪类选择器
E：first-child 功能描述：作为父元素的第一个子元素的元素E
E：last-child 功能描述：作为父元素的最后一个子元素的元素E
E F：nth-child 功能描述：选择父级元素E的第n个子元素F，关键字为even，odd。
E：first-of-type 功能描述：选择父元素内具有指定类型的第一个E元素
E：last-of-type 功能描述：选择父元素内具有指定类型的最后一个E元素
E F：nth-of-type 功能描述：选择父元素内具有指定类型的第n个F元素
区别：E F：nth-child(n)在父级里从一个元素开始查找，不分类型。
E F：nth-of-type(n)在父级里先看类型，再看位置。
odd even:奇数，偶数，或者使用公式(an+b)
4.2.3属性选择器
E[attr] 功能描述：选择匹配具有属性attr的E元素
E[attr=val] 功能描述：选择匹配具有属性attr的E元素，并且属性值为val(其中val区分大小写)
E[attr^=val] 功能描述：选择匹配具有属性attr的E元素，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 功能描述：选择匹配具有属性attr的E元素，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 功能描述：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”。
4.2.4目标伪类选择器
E：target
<div id="d1" class="c">
<h1><a href="#d1" >青花瓷</a></h1>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/>
</p>
</div>
<style type="text/css">
p{
height: 0px;
overflow: hidden;
}
.c:target p{
height: 300px;
color: red;
}
.c:target h1 a{
color: red;
}
</style>
####5.css美化网页元素####
##5.1字体样式##
属性名 含义
font-family 设置字体类型
font-size 设置字体大小
font-style 设置字体风格
font-weight 设置字体的粗细
font 在一个声明中设置所有字体属性
5.1.1字体类型
p{font-family:Verdana,"楷体";}
英文设置为Verdana类型，中文设置为楷体
p{font-family:Times,"Times New Roman","楷体";}
英文设置为Times，如果计算机中没有这个字体则设置为Times New Roman字体，中文设置为楷体
5.1.2字体大小
h1{font-size:24px;}
设置字体大小为24像素
5.1.3字体风格
属性值：normal(默认),italic(斜体字样式),oblique(倾斜的字体样式)
5.1.4字体的粗细
属性值：normal(默认),bold(粗体字体),bolder(更粗的字体),lighter(更细的字体),(100,200,300,400,500,600,700,800,900)定义由细到粗的字体，400等同于normal，700等同于bold
5.1.5字体的属性
p span{font:oblique bold 12px "楷体";}
##5.2排版网页文本##
属性名 含义
color 设置文本颜色
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰
vertical-align 设置垂直对齐方式
text-shadow 设置文本阴影
5.2.1文本颜色
1.使用十六进制表示
2.rgb（r,g,b）
以上rgb三个参数，正整数的取值为0~255，百分比的取值为0%~100%，超出范围值将截止其最近的取值极限，三个参数都不能负数
3.rgba(r,g,b,a)
以上a控制alpha透明度的参数，其中这个透明通道值为0~1，如果是0表示完全透明，如果是1表示完全不透明，取值不能是负数。
5.2.2水平对齐方式
属性值：left(左)，right(右),center(中间),justify(两端对齐)
5.2.3首行缩进和行高
line-height的属性值与font-size的属性值一样，也是以数字来表示，单位px，也可以用倍数表示，行高是字体大小的倍数
text-indent缩进距离以数字表示，单位em或px，通常为2em，为2个字符
5.2.4文本装饰
属性值：none(默认值)，underline(设置文本的下划线),overline(设置文本的上划线),line-through(设置文本的删除线)
5.2.5垂直对齐方式
通常用于设置图片与文本的对齐方式
属性值：middle，top，bottom
5.2.6文本阴影
text-shadow：color x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);
text-shadow:blue 10px 10px 2px;
##5.3设置超链接和列表样式##
5.3.1超链接伪类
a:hover{}
伪类名称 含义
a:link 单击访问前的超链接样式
a:visited 单击访问后
a:hover 鼠标悬浮其上
a:active 单击未释放
设置伪类的顺序：a:link，a:visited，a:hover，a:active
5.3.2列表样式
1.list-style-type设置列表标记的类型
属性值：none，disc(实心圆)，circle(空心圆),square(实心方块)，decimal(数字)
li{list-style-type:disc;}
2.list-style设置所有列表的属性
type-position-image的顺序设置属性值，实际使用中会直接使用list-style来设置无标记符
##5.4设置背景属性##
5.4.1背景属性
1.背景颜色
background-color：#D7D7D7;
2.背景图像
background-image:url(图片路径)
图片重复方式
background-repeat:repeat-x；
属性值：repeat(沿水平和垂直方向平铺)，repeat-x(沿水平方向平铺),no-repeat(不平铺，背景图像只显示一次),repeat-y(沿垂直方向平铺)
3.背景定位
background-position：x y；
x y可以是像素，百分比，方向关键词
示例
1）0px 0px 默认，表示从左上角出现的背景图像
2）30px 30px 正向偏移，图像向下和向右移动
3）-50px -50px 反向偏移，图像向上和向右移动
4）30% 50% 垂直方向居中，水平方向偏移30%
5）right top 右上角出现
6）left bottom 左下角出现
7）top 上方水平居中位置出现
4.背景
background：#c00 url(../arrow-down.gif) 205px 10px no-repeat;
5.4.1背景尺寸
background-size:auto
可以设置背景图像的大小，单位像素px，百分比，填充(cover)配合背景定位，contain(保持本身的宽高比例的缩放)
5.4.2px
使用像素调整图像大小 ，单位px
5.4.3perception
使用百分比调整图像大小，单位%
5.4.4cover
使得背景图像放大后填充整个div，配合背景定位一起使用，将background-position：设置为center
5.4.5contain
可以使图像保持本身的宽高比例，将图片缩放到宽度或者高度正好适应所定义背景的区域。
##5.5css渐变##
说明：1）IE浏览器是Trident内核，应加前缀：-ms-
2）Firefox浏览器是Mozilla内核，应加前缀：-moz-
3）Chrome浏览器是Webkit内核，应加前缀：-webkit-
4）Opera浏览器是Blink内核，应加前缀：-o-
5）Safari浏览器是Webkit内核，应加前缀：-webkit-
语法如下：background:
linear-gradient(position,color1,color2,...)
考虑到加浏览器前缀。如果是Webit内核的浏览器要兼容
-webkit-linear-gradient(position,color1,color2,...)
属性值（position）：1）to top：从底部到顶部
2）to bottom：从顶部到底部
3）to left：从右边到左边
4）to right：从左边到右边
5）to top left：从右下方到左上方
6）to top right：从左下方到右上方
7）to bottom left：从右上方到左下方
8）to bottom right：从左上方到右下方
####6.盒子模型####
##6.1盒子模型##
6.1.1什么是盒子模型
一个独立的盒子模型由content(网页内容),border(边框),padding(内边距),margin(外边距)
content:位于最中间，网页的主要内容
border:位于内边距外面
padding:位于边框内部的空隙,是内容与边框的距离
margin：位于边框外部的空隙，后面加auto表示页面居中
6.1.2边框
1.border-color
属性 说明
border-top-color 设置上边框颜色
border-right-color 设置右边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-color 设置四个边框为同一颜色
注意：设置border-color属性同时设置四条边框的颜色时，设置顺序按顺时针向上，右，下，左设置，边框颜色，没有设置属性值的找对边。
也可以同时设置上下，左右边框的颜色
6.1.3border-width
用来指定border粗细程度，它的值有thin(设置细的边框)，medium(设置中等的边框，一般为2px)，thick(设置粗的边框)和像素值。
属性 说明
border-top-width 设置上边框粗细
border-right-width 设置右边框粗细
border-bottom-width 设置下边框粗细
border-left-width 设置左边框粗细
border-width 设置四个边框为同一粗细
特性与border-color一样
6.1.4border-style
用来指定border的样式，它的值有none(无边框),hidden(隐藏),dotted(点线边框),dashed(虚线边框),solid(实线边框),double(双边框),groove(),ridge(),outset。
属性值 说明
border-top-style 设置上边框样式
border-right-style 设置右边框样式
border-bottom-style 设置下边框样式
border-left-style 设置左边框样式
border-style 设置四个边框为同一样式
一般常用的值为：none，solid
特性与border-color一样
border的简写属性，如设置某网页元素的下边框为红色，9px，虚线：border-bottom:9px #F00 dashed
(同时设置三个属性时，没有限制，可以按任意顺序设置，但是通常的顺序为粗细，颜色，样式)
设置某网页元素为红色，9px，虚线：border：9px #F00 dashed
6.1.5外边距
外边距(margin)位于盒子边框外，指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离,单位可以是像素px，也可以是百分比%。
属性 说明
margin-top 设置上外边框
margin-right 设置右外边框
margin-bottom 设置下外边框
margin-left 设置左外边框
margin 设置四个方位的外边框(顺时针的顺序进行设置)
margin还有一个特色值：auto，这个值通常当设置盒子在它的父容器中居中显示时使用(必须是块元素,要设置宽度)。margin：0px auto;
display: inline-block;把行内元素变为块元素。
6.1.6内边距
内边距(padding)用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。
属性 说明
padding-left 设置左内边距
padding-right 设置右内边距
padding-top 设置上内边距
padding-bottom 设置下内边距
padding 设置四个方位内边距
6.1.7盒子模型的尺寸
在css中，width和height指的是内容区域的宽度和高度。增加了边框、内边距、外边距、后不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。
div{
width:100px; /*div宽度100px*/
height:100px; /*div高度100px*/
padding:5px; /*内边距5px*/
margin:10px; /*外边距10px*/
border:1px solid #00000 /*边框1px*/
}
盒子模型的总尺寸(外盒的总尺寸)=border+padding+margin+内容宽度
盒子模型的总尺寸(内盒的总尺寸)=border+padding+内容宽度
6.1.8box-sizing布局
box-sizing:content-box(默认值，盒子的宽度或高度=border+padding+（margin）+width/height)|border-box(盒子的宽度或高度等于元素内容的宽度或高度，即height=盒子的总高度)
inherit(此值使元素继承父元素的盒子模型模式)
##6.2圆角边框##
6.2.1border-radius的语法
border-radius后面可以设置1~4个值，单位可以是px，%
border-radius:20px 四个角都是圆角，值是20px
border-radius：20px 40px;上下20px，左右40px
border-radius;20px 40px 30px;上20px，右40px，下30px，左40px
6.2.2利用border-radius制作特殊图形
1.圆形:1）元素的宽度和高度必须相同
2）圆角的半径为元素宽度的一半，或者之间设置圆角半径值50%。
2.半圆形：1）50px 50px 0 0设置上半圆
2）0 0 50px 50px设置下半圆
3）0 50px 50px 0设置右半圆
4）50px 0 0 50px设置左半圆
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角的半径为元素的高度值。
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角的半径为元素的宽度值。
3.扇形：50px 0 0 0设置左上
0 50px 0 0设置右上
0 0 50px 0设置下右
0 0 0 50px设置下左
##6.3盒子阴影##
6.3.1box-shadow的语法
box-shadow：inset x-offset y-offset blur-radius color；
1）inset：阴影类型，可选值，默认的投影方式的外阴影，如果设置的inset表示内阴影。
2）x-offset：x轴位移，用来指定阴影的水平位移量，其值可以是正值，也可以是负值，如果是正值，阴影在对象的右边，反之在左边。
3）y-offset：y轴位移，用来指定阴影的垂直位移量，其值可以是正值，也可以是负值，7阴影在对象的底部，反之在顶部。
4）blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围，值越大阴影想外模糊的范围越大，阴影的边缘越模糊，只能是正值，为0则不具有模糊效果
5）color：阴影颜色
box-shadow：20px 10px 10px #06c外阴影
box-shadow：inset 20px 10px 10px #06c内阴影
####7浮动####
##7.1display##
7.1.1display属性的使用
值 说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 行内元素的默认值
inline-block 行内块元素，元素既具有行内元素的特性，也具有块元素的特性
none 设置元素不会被显示
nav标签布局导航条
##7.2浮动概述##
7.2.1float属性
属性值 说明
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，并会显示在其文本中出现的位置
##7.3清除浮动##
7.3.1clear属性
值 说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧不允许浮动元素
none 默认值，允许浮动元素在两侧
7.3.2解决父级边框塌陷的方法
1.浮动元素后面加空div
2.设置父元素的高度
3.父级添加overflow属性
属性值 说明
visible 默认值，内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
4.父级添加伪类after
注意：浮动元素后面加空div，很简单，但是空div会造成HTML代码冗余
设置父元素的高度，很简单，但是元素固定高度会降低元素的可扩展
父级添加overflow属性，很简单，但是有下拉列表的场景不能用
父级添加伪类after，写法比上面要复杂，但是没有副作用，推荐使用
##7.4inline-block与浮动的区别
优点：
inline-block可以让元素排在一行，并且支持宽度与高度，代码实现起来方便添加该属性的元素带标准文档流中，不需要清除浮动。
float可以让元素排在一行并且支持宽度和高度，可以决定排列方向
缺点：
display：inline-block位置方向不可控制，会解析空格，
float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
使用：header article section nav footer布局
####8.定位网页元素####
##8.1定位在网页元素的应用##
position属性 说明
static 默认值，没有定位，元素按照标准文档进行布局。
relative 相对定位，使用相对定位的盒子位置常以标准文档流的排版方式为基础，然后向后使盒子相对于它在原来的位置偏移指定的距离。
absolute 绝对定位，盒子的位置以包含它的盒子为基准进行偏移。
fixed 固定定位，以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条，依然保持对象位置不变。
当属性设置为absolute,relative,fixed时，有四个子属性，top，right，bottom，left，这四个属性可以设置为像素值外，还可以设置百分数。
left设置为正数，元素会向右移动，top值设置为正数，元素向下移动。
固定定位的特性：相对浏览器来定位，偏移量不会随滚动条的移动而移动。
固定定位的使用场景：一般用在窗口左右两边的固定广告，返回顶部图标，吸顶导航栏和固定右侧导航栏等。
绝对定位是以盒子作为基准的，但是要先对盒子的定位属性设置为relative相对定位，才可以利用绝对定位。
结论：1）使用了绝对定位的元素，以它最近的一个“已经定位"的”祖先“元素为基准进行定位。如果没有已经定位的祖先元素，那么以浏览器窗口为基准进行定位。
2）绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。
##8.2z-index属性
8.2.1z-index属性的应用
z-index是用于调整元素定位时重叠层的上下位置。它的值为整数，可以是正数，也可以是负数，当元素被设置了postion属性时，z-index属性可以设置各元素之间的重叠高低
关系。默认值为0。
8.2.2设置层的透明度
属性 说明
opacity:x x的值为0~1，值越小越透明
filter:alpha(opacity=x) x的值为0~100，值越小越透明
由于两种方法在使用中存在浏览器的兼容问题，并不能确定用户的浏览器。因此在样式表中同时设置这两种方法，以适应所有的浏览器。
####9.利用css制作网页动画####
##9.1css变形##
9.1.1变形简介
css变形是一些效果的集合，如平移，旋转，缩放，倾斜效果，每个效果都可以称为变形，css变形是通过transform实现的，它可以作用在块元素和行内元素上，语法如下：
transform:[transform-function] *;
transform-function:设置变形函数，可以是一个，也可以是多个，中间以空格分开。
translate():平移函数，基于x，y坐标重新定位元素的位置
scale():缩放函数，可以使任意元素对象 尺寸发生变化
rotate():旋转函数，取值是一个度数值.
skew():倾斜函数，取值是一个度数值。
css3 3D变形函数：translate3d()平移函数，scale3d()缩放函数,rotate3d()旋转函数。
9.1.22D变形
1.2D位移
位移指的是元素从一个位置移动到另一个位置上，可以使用translate()函数让元素在x轴，y轴上任意移动而不影响在x轴或y轴上的其他元素。
translate（tx，ty）;
tx表示x轴移动的向量长度，如果为正值，表示元素向x轴右侧移动，为负值则向左侧移动
ty表示y轴移动的向量长度，如果为正值，表示元素向y轴下侧移动，为负值则向上侧移动
常用单位是px，也可以是百分比。
当translate()函数只有一个值时，表示水平偏移，如果只设置垂直偏移，就必须设置第一个参数为0，第二个参数为偏移量。
例:transform: translate(4px, 8px);
2.2D缩放
scale()函数能够用来缩放元素大小，该元素有两个参数值，分别用来定义宽度和高度的缩放比例，默认值为1，0~0.99的任意值都可以使元素缩小，而任何大于1的值能让元素放大
scale(sx,sy)；
例:transform: scale(2, 5);
3.2D倾斜
skew()函数能够让元素倾斜显示，可将一个对象以其中心为之围绕X轴和Y轴按照一定的角度倾斜。
skew(ax,ay);
ax:指定元素水平方向(x轴)的倾斜角度。
ay:指定元素垂直方向(y轴)的倾斜角度。
ax和ay都是角度值，单位用deg(度)表示。
例：transform: skew(40deg, -20deg);
4.2D旋转
rotate()函数能够让元素在二维空间里绕着一个指定的角度旋转，这个元素对象可以是行内元素，可以是块元素，旋转的角度值如果是正值，则元素相对原来的中心顺时针旋转，如果是负值，则元素相对原来中心逆时针旋转。
rotate(a);
该函数只接收一个值a，代表的是角度值。a的取值为正值，元素相对原来中心顺时针旋转。单位使用deg表示。
例：transform: rotate(60deg);
##9.2css3过渡##
9.2.1过渡属性的使用
语法：transition:[transition-property transition-duration transition-timing-function transition-delay]*;
transition-property:指定过渡或动态模拟的css属性
transition-duration:指定完成过渡所需要的时间
transition-timing-function:指定过渡函数
transition-delay:指定过渡开锁出现的延迟时间
需要注意的是四个属性之间不能用逗号隔开，而是使用空格分隔。
简单语法：transition:过渡属性 过渡所需的时间 过渡动画函数 过渡延迟时间
1.过渡属性
transition-property:属性用来定义转换动画的CSS属性名称，常用的取值：IDENT：指定的CSS属性(width、height、background-color属性等)。
all：指定所有元素支持transition-property属性的样式，一般为了方便都会用all
例： transition: background-color;
2.过渡所需的时间
transition-duration属性用来定义转换动画的时间长度，即从设置旧属性到新属性所花费的时间，单位为s
例： transition: background-color 2s;
3.过渡动画函数
transition-timing-function属性用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来制定动画的快慢方式。
常用的几种过渡动画方式如下。
ease:元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢(默认值).
linear:元素样式从初始状态过渡到终止状态时恒速(匀速运动).
ease-in:元素样式从初始状态过渡到终止状态时速度越来越快(渐显效果).
ease-out:元素样式从初始状态过渡到终止状态时速度越来越慢(渐隐效果).
ease-in-out:元素样式从初始状态过渡到终止状态时速度先加速在减速(渐显渐隐效果)。
例：transition: background-color 2s ease-out;
4.过渡延迟时间
transition-delay属性用来指定一个动画开始执行的时间，也就是说，在改变元素属性值后多长时间去执行过渡效果。这个时间值可以是正值，负值或0.
正值：元素过渡效果不会触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断。
0：默认值，元素过渡效果立即执行。
9.2.2过渡的触发机制
伪类触发：hover，active，focus,checked等
媒体查询：可以通过@media属性判断设备的尺寸、方向等
JavaScript触发：用JavaScrip脚本触发
总结过渡动画的使用步骤：
1）在默认样式中声明元素的初始状态样式。
2）声明过渡元素最终状态样式，如悬浮状态
3）在默认样式中通过添加过渡函数，添加一些不同的样式
##9.3css3动画##
9.3.1css3动画使用过程
1）通过关键帧(@keyframes)来声明一个动画
2）找到要设置动画的元素，并且调用关键帧声明的动画
1.设置关键帧
语法： @keyframes IDENT{
from{/*css样式*/}
percentage{/*css样式*/}
to{/*css样式*/}
}
也可以将关键词from和to换成百分比，即
@keyframes IDENT{
0%{/*css样式*/}
percentage{/*css样式*/}
100%{/*css样式*/}
}
2.调用关键帧
语法：animatioin可以在不触发任何事件的情况下也能随着时间的变化来改变元素的css属性值，从而达到一种动画的效果。
animation：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode；
animation：动画名称 动画的播放时间 动画的播放方式 开始播放动画的时间 动画的播放次数 动画的播放方向 动画的播放状态 动画时间外属性
1）animation-name：是由@keyframes创建的动画名称
2）animation-duration animation-timing-function animation-delay和过渡时间、过渡方式、延时时间是一样的
3）animation-iteration-count：动画的播放次数。值通常为整数，默认值是1，表示动画执行一次。还有一个特殊值infinite，表示动画无限次播放
4）animation-direction：动画的播放方向，主要有两个只，normal表示动画每次都是向前播放，另一个值是alternate，表示动画播放为偶数次则向前播放，奇数次则向反方向播放。
5）animation-play-state：动画的播放状态：有两个值：running和paused。可以通过paused将正在播放的元素动画停下来，也可以是使用running将暂停的动画重新播放。
6）animation-fill-mode；定义在动画开始之前和结束之后发生的操作。其取值为forwards表示动画在结束后继续应用最后关键帧的位置，取值为backwards表示会在向元素应用动画样式时迅速应用动画的初始帧，
取值为both表示元素动画同时具有forwards和backwards的效果。
##4.1##
4.1.1CSS的基本语法结构
行内样式，在html标签中直接使用style属性设置css样式
<h2 style="color: red;font-size: 12px;"></h2>
内部样式表，把css代码写在head的style标签中
<style type="text/css">
h3{
color: #090;
}
p{
font-size: 16px;
color: red;
}
.green{
font-size: 20px;
color: green;
}
.red{
font-size: 30px;
color: red;
}
</style>
外部样式表，把css代码保存为一个单独的样式表文件，文件扩展名为.css，在页面中引用外部样式表即可。html文件引用外部样式表有两种方式，分别是链接式和导入式。
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
4.1.2css3的基本选择器
1.标签选择器
标签{}
2.类选择器
.类名{}
class="类名"
3.id选择器
#id名{}
id="id名"
同一个id属性在用一个页面中只能使用一次，类选择器可以使用多次
4.1.3优先级
就近原则
id选择器>类选择器>标签选择器
##4.2高级选择器##
4.2.1层次选择器
1.后代选择器 E F
作用：选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 div p{ }
2.子选择器 E>F
作用：选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 div>p{}
3.相邻兄弟选择器 E+F
作用：选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 .active+p{}
4.通用兄弟选择器 E~F
作用：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 .active~p{
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active~p{
background: red;
}
</style>
</head>
<body>
<div>
<p >1</p>
<p class="active">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
<p>7</p>
<p>8</p>
</div>
</body>
</html>
4.2.2结构伪类选择器
E：first-child 功能描述：作为父元素的第一个子元素的元素E
E：last-child 功能描述：作为父元素的最后一个子元素的元素E
E F：nth-child 功能描述：选择父级元素E的第n个子元素F，关键字为even，odd。
E：first-of-type 功能描述：选择父元素内具有指定类型的第一个E元素
E：last-of-type 功能描述：选择父元素内具有指定类型的最后一个E元素
E F：nth-of-type 功能描述：选择父元素内具有指定类型的第n个F元素
区别：E F：nth-child(n)在父级里从一个元素开始查找，不分类型。
E F：nth-of-type(n)在父级里先看类型，再看位置。
odd even:奇数，偶数，或者使用公式(an+b)
4.2.3属性选择器
E[attr] 功能描述：选择匹配具有属性attr的E元素
E[attr=val] 功能描述：选择匹配具有属性attr的E元素，并且属性值为val(其中val区分大小写)
E[attr^=val] 功能描述：选择匹配具有属性attr的E元素，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 功能描述：选择匹配具有属性attr的E元素，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 功能描述：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”。
4.2.4目标伪类选择器
E：target
<div id="d1" class="c">
<h1><a href="#d1" >青花瓷</a></h1>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br/>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br/>
</p>
</div>
<style type="text/css">
p{
height: 0px;
overflow: hidden;
}
.c:target p{
height: 300px;
color: red;
}
.c:target h1 a{
color: red;
}
</style>
####5.css美化网页元素####
##5.1字体样式##
属性名 含义
font-family 设置字体类型
font-size 设置字体大小
font-style 设置字体风格
font-weight 设置字体的粗细
font 在一个声明中设置所有字体属性
5.1.1字体类型
p{font-family:Verdana,"楷体";}
英文设置为Verdana类型，中文设置为楷体
p{font-family:Times,"Times New Roman","楷体";}
英文设置为Times，如果计算机中没有这个字体则设置为Times New Roman字体，中文设置为楷体
5.1.2字体大小
h1{font-size:24px;}
设置字体大小为24像素
5.1.3字体风格
属性值：normal(默认),italic(斜体字样式),oblique(倾斜的字体样式)
5.1.4字体的粗细
属性值：normal(默认),bold(粗体字体),bolder(更粗的字体),lighter(更细的字体),(100,200,300,400,500,600,700,800,900)定义由细到粗的字体，400等同于normal，700等同于bold
5.1.5字体的属性
p span{font:oblique bold 12px "楷体";}
##5.2排版网页文本##
属性名 含义
color 设置文本颜色
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰
vertical-align 设置垂直对齐方式
text-shadow 设置文本阴影
5.2.1文本颜色
1.使用十六进制表示
2.rgb（r,g,b）
以上rgb三个参数，正整数的取值为0~255，百分比的取值为0%~100%，超出范围值将截止其最近的取值极限，三个参数都不能负数
3.rgba(r,g,b,a)
以上a控制alpha透明度的参数，其中这个透明通道值为0~1，如果是0表示完全透明，如果是1表示完全不透明，取值不能是负数。
5.2.2水平对齐方式
属性值：left(左)，right(右),center(中间),justify(两端对齐)
5.2.3首行缩进和行高
line-height的属性值与font-size的属性值一样，也是以数字来表示，单位px，也可以用倍数表示，行高是字体大小的倍数
text-indent缩进距离以数字表示，单位em或px，通常为2em，为2个字符
5.2.4文本装饰
属性值：none(默认值)，underline(设置文本的下划线),overline(设置文本的上划线),line-through(设置文本的删除线)
5.2.5垂直对齐方式
通常用于设置图片与文本的对齐方式
属性值：middle，top，bottom
5.2.6文本阴影
text-shadow：color x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);
text-shadow:blue 10px 10px 2px;
##5.3设置超链接和列表样式##
5.3.1超链接伪类
a:hover{}
伪类名称 含义
a:link 单击访问前的超链接样式
a:visited 单击访问后
a:hover 鼠标悬浮其上
a:active 单击未释放
设置伪类的顺序：a:link，a:visited，a:hover，a:active
5.3.2列表样式
1.list-style-type设置列表标记的类型
属性值：none，disc(实心圆)，circle(空心圆),square(实心方块)，decimal(数字)
li{list-style-type:disc;}
2.list-style设置所有列表的属性
type-position-image的顺序设置属性值，实际使用中会直接使用list-style来设置无标记符
##5.4设置背景属性##
5.4.1背景属性
1.背景颜色
background-color：#D7D7D7;
2.背景图像
background-image:url(图片路径)
图片重复方式
background-repeat:repeat-x；
属性值：repeat(沿水平和垂直方向平铺)，repeat-x(沿水平方向平铺),no-repeat(不平铺，背景图像只显示一次),repeat-y(沿垂直方向平铺)
3.背景定位
background-position：x y；
x y可以是像素，百分比，方向关键词
示例
1）0px 0px 默认，表示从左上角出现的背景图像
2）30px 30px 正向偏移，图像向下和向右移动
3）-50px -50px 反向偏移，图像向上和向右移动
4）30% 50% 垂直方向居中，水平方向偏移30%
5）right top 右上角出现
6）left bottom 左下角出现
7）top 上方水平居中位置出现
4.背景
background：#c00 url(../arrow-down.gif) 205px 10px no-repeat;
5.4.1背景尺寸
background-size:auto
可以设置背景图像的大小，单位像素px，百分比，填充(cover)配合背景定位，contain(保持本身的宽高比例的缩放)
5.4.2px
使用像素调整图像大小 ，单位px
5.4.3perception
使用百分比调整图像大小，单位%
5.4.4cover
使得背景图像放大后填充整个div，配合背景定位一起使用，将background-position：设置为center
5.4.5contain
可以使图像保持本身的宽高比例，将图片缩放到宽度或者高度正好适应所定义背景的区域。
##5.5css渐变##
说明：1）IE浏览器是Trident内核，应加前缀：-ms-
2）Firefox浏览器是Mozilla内核，应加前缀：-moz-
3）Chrome浏览器是Webkit内核，应加前缀：-webkit-
4）Opera浏览器是Blink内核，应加前缀：-o-
5）Safari浏览器是Webkit内核，应加前缀：-webkit-
语法如下：background:
linear-gradient(position,color1,color2,...)
考虑到加浏览器前缀。如果是Webit内核的浏览器要兼容
-webkit-linear-gradient(position,color1,color2,...)
属性值（position）：1）to top：从底部到顶部
2）to bottom：从顶部到底部
3）to left：从右边到左边
4）to right：从左边到右边
5）to top left：从右下方到左上方
6）to top right：从左下方到右上方
7）to bottom left：从右上方到左下方
8）to bottom right：从左上方到右下方
####6.盒子模型####
##6.1盒子模型##
6.1.1什么是盒子模型
一个独立的盒子模型由content(网页内容),border(边框),padding(内边距),margin(外边距)
content:位于最中间，网页的主要内容
border:位于内边距外面
padding:位于边框内部的空隙,是内容与边框的距离
margin：位于边框外部的空隙，后面加auto表示页面居中
6.1.2边框
1.border-color
属性 说明
border-top-color 设置上边框颜色
border-right-color 设置右边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-color 设置四个边框为同一颜色
注意：设置border-color属性同时设置四条边框的颜色时，设置顺序按顺时针向上，右，下，左设置，边框颜色，没有设置属性值的找对边。
也可以同时设置上下，左右边框的颜色
6.1.3border-width
用来指定border粗细程度，它的值有thin(设置细的边框)，medium(设置中等的边框，一般为2px)，thick(设置粗的边框)和像素值。
属性 说明
border-top-width 设置上边框粗细
border-right-width 设置右边框粗细
border-bottom-width 设置下边框粗细
border-left-width 设置左边框粗细
border-width 设置四个边框为同一粗细
特性与border-color一样
6.1.4border-style
用来指定border的样式，它的值有none(无边框),hidden(隐藏),dotted(点线边框),dashed(虚线边框),solid(实线边框),double(双边框),groove(),ridge(),outset。
属性值 说明
border-top-style 设置上边框样式
border-right-style 设置右边框样式
border-bottom-style 设置下边框样式
border-left-style 设置左边框样式
border-style 设置四个边框为同一样式
一般常用的值为：none，solid
特性与border-color一样
border的简写属性，如设置某网页元素的下边框为红色，9px，虚线：border-bottom:9px #F00 dashed
(同时设置三个属性时，没有限制，可以按任意顺序设置，但是通常的顺序为粗细，颜色，样式)
设置某网页元素为红色，9px，虚线：border：9px #F00 dashed
6.1.5外边距
外边距(margin)位于盒子边框外，指与其他盒子之间的距离，也就是指网页中元素与元素之间的距离,单位可以是像素px，也可以是百分比%。
属性 说明
margin-top 设置上外边框
margin-right 设置右外边框
margin-bottom 设置下外边框
margin-left 设置左外边框
margin 设置四个方位的外边框(顺时针的顺序进行设置)
margin还有一个特色值：auto，这个值通常当设置盒子在它的父容器中居中显示时使用(必须是块元素,要设置宽度)。margin：0px auto;
display: inline-block;把行内元素变为块元素。
6.1.6内边距
内边距(padding)用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。
属性 说明
padding-left 设置左内边距
padding-right 设置右内边距
padding-top 设置上内边距
padding-bottom 设置下内边距
padding 设置四个方位内边距
6.1.7盒子模型的尺寸
在css中，width和height指的是内容区域的宽度和高度。增加了边框、内边距、外边距、后不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。
div{
width:100px; /*div宽度100px*/
height:100px; /*div高度100px*/
padding:5px; /*内边距5px*/
margin:10px; /*外边距10px*/
border:1px solid #00000 /*边框1px*/
}
盒子模型的总尺寸(外盒的总尺寸)=border+padding+margin+内容宽度
盒子模型的总尺寸(内盒的总尺寸)=border+padding+内容宽度
6.1.8box-sizing布局
box-sizing:content-box(默认值，盒子的宽度或高度=border+padding+（margin）+width/height)|border-box(盒子的宽度或高度等于元素内容的宽度或高度，即height=盒子的总高度)
inherit(此值使元素继承父元素的盒子模型模式)
##6.2圆角边框##
6.2.1border-radius的语法
border-radius后面可以设置1~4个值，单位可以是px，%
border-radius:20px 四个角都是圆角，值是20px
border-radius：20px 40px;上下20px，左右40px
border-radius;20px 40px 30px;上20px，右40px，下30px，左40px
6.2.2利用border-radius制作特殊图形
1.圆形:1）元素的宽度和高度必须相同
2）圆角的半径为元素宽度的一半，或者之间设置圆角半径值50%。
2.半圆形：1）50px 50px 0 0设置上半圆
2）0 0 50px 50px设置下半圆
3）0 50px 50px 0设置右半圆
4）50px 0 0 50px设置左半圆
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角的半径为元素的高度值。
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角的半径为元素的宽度值。
3.扇形：50px 0 0 0设置左上
0 50px 0 0设置右上
0 0 50px 0设置下右
0 0 0 50px设置下左
##6.3盒子阴影##
6.3.1box-shadow的语法
box-shadow：inset x-offset y-offset blur-radius color；
1）inset：阴影类型，可选值，默认的投影方式的外阴影，如果设置的inset表示内阴影。
2）x-offset：x轴位移，用来指定阴影的水平位移量，其值可以是正值，也可以是负值，如果是正值，阴影在对象的右边，反之在左边。
3）y-offset：y轴位移，用来指定阴影的垂直位移量，其值可以是正值，也可以是负值，7阴影在对象的底部，反之在顶部。
4）blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围，值越大阴影想外模糊的范围越大，阴影的边缘越模糊，只能是正值，为0则不具有模糊效果
5）color：阴影颜色
box-shadow：20px 10px 10px #06c外阴影
box-shadow：inset 20px 10px 10px #06c内阴影
####7浮动####
##7.1display##
7.1.1display属性的使用
值 说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 行内元素的默认值
inline-block 行内块元素，元素既具有行内元素的特性，也具有块元素的特性
none 设置元素不会被显示
nav标签布局导航条
##7.2浮动概述##
7.2.1float属性
属性值 说明
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，并会显示在其文本中出现的位置
##7.3清除浮动##
7.3.1clear属性
值 说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧不允许浮动元素
none 默认值，允许浮动元素在两侧
7.3.2解决父级边框塌陷的方法
1.浮动元素后面加空div
2.设置父元素的高度
3.父级添加overflow属性
属性值 说明
visible 默认值，内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
4.父级添加伪类after
注意：浮动元素后面加空div，很简单，但是空div会造成HTML代码冗余
设置父元素的高度，很简单，但是元素固定高度会降低元素的可扩展
父级添加overflow属性，很简单，但是有下拉列表的场景不能用
父级添加伪类after，写法比上面要复杂，但是没有副作用，推荐使用
##7.4inline-block与浮动的区别
优点：
inline-block可以让元素排在一行，并且支持宽度与高度，代码实现起来方便添加该属性的元素带标准文档流中，不需要清除浮动。
float可以让元素排在一行并且支持宽度和高度，可以决定排列方向
缺点：
display：inline-block位置方向不可控制，会解析空格，
float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
使用：header article section nav footer布局
####8.定位网页元素####
##8.1定位在网页元素的应用##
position属性 说明
static 默认值，没有定位，元素按照标准文档进行布局。
relative 相对定位，使用相对定位的盒子位置常以标准文档流的排版方式为基础，然后向后使盒子相对于它在原来的位置偏移指定的距离。
absolute 绝对定位，盒子的位置以包含它的盒子为基准进行偏移。
fixed 固定定位，以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条，依然保持对象位置不变。
当属性设置为absolute,relative,fixed时，有四个子属性，top，right，bottom，left，这四个属性可以设置为像素值外，还可以设置百分数。
left设置为正数，元素会向右移动，top值设置为正数，元素向下移动。
固定定位的特性：相对浏览器来定位，偏移量不会随滚动条的移动而移动。
固定定位的使用场景：一般用在窗口左右两边的固定广告，返回顶部图标，吸顶导航栏和固定右侧导航栏等。
绝对定位是以盒子作为基准的，但是要先对盒子的定位属性设置为relative相对定位，才可以利用绝对定位。
结论：1）使用了绝对定位的元素，以它最近的一个“已经定位"的”祖先“元素为基准进行定位。如果没有已经定位的祖先元素，那么以浏览器窗口为基准进行定位。
2）绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。
##8.2z-index属性
8.2.1z-index属性的应用
z-index是用于调整元素定位时重叠层的上下位置。它的值为整数，可以是正数，也可以是负数，当元素被设置了postion属性时，z-index属性可以设置各元素之间的重叠高低
关系。默认值为0。
8.2.2设置层的透明度
属性 说明
opacity:x x的值为0~1，值越小越透明
filter:alpha(opacity=x) x的值为0~100，值越小越透明
由于两种方法在使用中存在浏览器的兼容问题，并不能确定用户的浏览器。因此在样式表中同时设置这两种方法，以适应所有的浏览器。
####9.利用css制作网页动画####
##9.1css变形##
9.1.1变形简介
css变形是一些效果的集合，如平移，旋转，缩放，倾斜效果，每个效果都可以称为变形，css变形是通过transform实现的，它可以作用在块元素和行内元素上，语法如下：
transform:[transform-function] *;
transform-function:设置变形函数，可以是一个，也可以是多个，中间以空格分开。
translate():平移函数，基于x，y坐标重新定位元素的位置
scale():缩放函数，可以使任意元素对象 尺寸发生变化
rotate():旋转函数，取值是一个度数值.
skew():倾斜函数，取值是一个度数值。
css3 3D变形函数：translate3d()平移函数，scale3d()缩放函数,rotate3d()旋转函数。
9.1.22D变形
1.2D位移
位移指的是元素从一个位置移动到另一个位置上，可以使用translate()函数让元素在x轴，y轴上任意移动而不影响在x轴或y轴上的其他元素。
translate（tx，ty）;
tx表示x轴移动的向量长度，如果为正值，表示元素向x轴右侧移动，为负值则向左侧移动
ty表示y轴移动的向量长度，如果为正值，表示元素向y轴下侧移动，为负值则向上侧移动
常用单位是px，也可以是百分比。
当translate()函数只有一个值时，表示水平偏移，如果只设置垂直偏移，就必须设置第一个参数为0，第二个参数为偏移量。
例:transform: translate(4px, 8px);
2.2D缩放
scale()函数能够用来缩放元素大小，该元素有两个参数值，分别用来定义宽度和高度的缩放比例，默认值为1，0~0.99的任意值都可以使元素缩小，而任何大于1的值能让元素放大
scale(sx,sy)；
例:transform: scale(2, 5);
3.2D倾斜
skew()函数能够让元素倾斜显示，可将一个对象以其中心为之围绕X轴和Y轴按照一定的角度倾斜。
skew(ax,ay);
ax:指定元素水平方向(x轴)的倾斜角度。
ay:指定元素垂直方向(y轴)的倾斜角度。
ax和ay都是角度值，单位用deg(度)表示。
例：transform: skew(40deg, -20deg);
4.2D旋转
rotate()函数能够让元素在二维空间里绕着一个指定的角度旋转，这个元素对象可以是行内元素，可以是块元素，旋转的角度值如果是正值，则元素相对原来的中心顺时针旋转，如果是负值，则元素相对原来中心逆时针旋转。
rotate(a);
该函数只接收一个值a，代表的是角度值。a的取值为正值，元素相对原来中心顺时针旋转。单位使用deg表示。
例：transform: rotate(60deg);
##9.2css3过渡##
9.2.1过渡属性的使用
语法：transition:[transition-property transition-duration transition-timing-function transition-delay]*;
transition-property:指定过渡或动态模拟的css属性
transition-duration:指定完成过渡所需要的时间
transition-timing-function:指定过渡函数
transition-delay:指定过渡开锁出现的延迟时间
需要注意的是四个属性之间不能用逗号隔开，而是使用空格分隔。
简单语法：transition:过渡属性 过渡所需的时间 过渡动画函数 过渡延迟时间
1.过渡属性
transition-property:属性用来定义转换动画的CSS属性名称，常用的取值：IDENT：指定的CSS属性(width、height、background-color属性等)。
all：指定所有元素支持transition-property属性的样式，一般为了方便都会用all
例： transition: background-color;
2.过渡所需的时间
transition-duration属性用来定义转换动画的时间长度，即从设置旧属性到新属性所花费的时间，单位为s
例： transition: background-color 2s;
3.过渡动画函数
transition-timing-function属性用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来制定动画的快慢方式。
常用的几种过渡动画方式如下。
ease:元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢(默认值).
linear:元素样式从初始状态过渡到终止状态时恒速(匀速运动).
ease-in:元素样式从初始状态过渡到终止状态时速度越来越快(渐显效果).
ease-out:元素样式从初始状态过渡到终止状态时速度越来越慢(渐隐效果).
ease-in-out:元素样式从初始状态过渡到终止状态时速度先加速在减速(渐显渐隐效果)。
例：transition: background-color 2s ease-out;
4.过渡延迟时间
transition-delay属性用来指定一个动画开始执行的时间，也就是说，在改变元素属性值后多长时间去执行过渡效果。这个时间值可以是正值，负值或0.
正值：元素过渡效果不会触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断。
0：默认值，元素过渡效果立即执行。
9.2.2过渡的触发机制
伪类触发：hover，active，focus,checked等
媒体查询：可以通过@media属性判断设备的尺寸、方向等
JavaScript触发：用JavaScrip脚本触发
总结过渡动画的使用步骤：
1）在默认样式中声明元素的初始状态样式。
2）声明过渡元素最终状态样式，如悬浮状态
3）在默认样式中通过添加过渡函数，添加一些不同的样式
##9.3css3动画##
9.3.1css3动画使用过程
1）通过关键帧(@keyframes)来声明一个动画
2）找到要设置动画的元素，并且调用关键帧声明的动画
1.设置关键帧
语法： @keyframes IDENT{
from{/*css样式*/}
percentage{/*css样式*/}
to{/*css样式*/}
}
也可以将关键词from和to换成百分比，即
@keyframes IDENT{
0%{/*css样式*/}
percentage{/*css样式*/}
100%{/*css样式*/}
}
2.调用关键帧
语法：animatioin可以在不触发任何事件的情况下也能随着时间的变化来改变元素的css属性值，从而达到一种动画的效果。
animation：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode；
animation：动画名称 动画的播放时间 动画的播放方式 开始播放动画的时间 动画的播放次数 动画的播放方向 动画的播放状态 动画时间外属性
1）animation-name：是由@keyframes创建的动画名称
2）animation-duration animation-timing-function animation-delay和过渡时间、过渡方式、延时时间是一样的
3）animation-iteration-count：动画的播放次数。值通常为整数，默认值是1，表示动画执行一次。还有一个特殊值infinite，表示动画无限次播放
4）animation-direction：动画的播放方向，主要有两个只，normal表示动画每次都是向前播放，另一个值是alternate，表示动画播放为偶数次则向前播放，奇数次则向反方向播放。
5）animation-play-state：动画的播放状态：有两个值：running和paused。可以通过paused将正在播放的元素动画停下来，也可以是使用running将暂停的动画重新播放。
6）animation-fill-mode；定义在动画开始之前和结束之后发生的操作。其取值为forwards表示动画在结束后继续应用最后关键帧的位置，取值为backwards表示会在向元素应用动画样式时迅速应用动画的初始帧，
取值为both表示元素动画同时具有forwards和backwards的效果。