一 概念
**概念：**Cascading Style Sheets：层叠样式表，S即对页面进行美化和布局控制
- 层叠：就是多个样式可以作用于一个html的元素上
优点：
- 使用CSS控制样式，功能给为强大，样式更多
- 将内容和样式进行解耦合，让分工协作更容易，
- CSS可以进行复用，提高开发效率
二 使用
有如下的几种方式：
内联样式
即在标签的内部使用style指定CSS，不推荐这样使用
内部样式
在head标签内部进行书写，然后在** **style属性中指定CSS代码,内部样式，只能在本页面生效
<head>
<!-- 内部样式-->
<style>
div{
color : blue;
}
</style>
</head>
<body>
<div>hello world</div>
</body>外部样式
外部样式，范围更广，可以作用在任何的页面
- 定义CSS资源文件
- 在页面的
head标签，定义link标签，引入外部的CSS样式资源
<link rel="stylesheet" href="a.css">或者采用style标签的@import来引入
<style>
@import "css/a.css";
</style>三 CSS语法
1 选择器
这里假设标签：三个标签相互嵌套 a->b->c
1 后代选择器：所有的后代都带这个css
a b{ }2 子选择器：只有孩子才有，不包括孩子的孩子
a>b{ }3 链接伪类选择器
/* 伪类选择器,采用冒号,分为好几个 */
/* 1 链接伪类选择器
a:link :选择所有未被访问的链接
a:visited : 选择所有已被访问的链接
a:hover : 选择鼠标指针放上的链接
a:active : 选择活动链接,鼠标按下,未弹起的样式
注意: 书写顺序必须是 link ---visited --- hover ---active
LVHA
*/
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: royalblue;
}
a:hover {
color: seagreen;
/* 展示下划线 */
text-decoration: underline;
}
a:active {
color: slateblue;
}
</style>
</head>
<body>
<a href="#1">小猪佩奇</a>
<a href="#2">小猪佩奇</a>
<a href="#3">小猪佩奇</a>
<a href="#4">小猪佩奇</a>
</body>
3 相邻兄弟选择器： 在当前标签的后面的那一个标签
假设有标签如下：
<a>
<b></b>
<b class="aaa"></b>
<b></b> `最后有效果的就是这个标签`
<b></b>
</a> # 第二个标签后面的那个为b的标签
.aaa + b{ css代码xxx }4 通用选择器：当前选择器后面全部的b标签都会有效果
.aaa~b{ css代码 }2 元素显示模式
2.1 块元素
div,h1-h6,p,ui,li,ol,等都是块元素，
特点:
独占一行高，宽，内外边距可以控制宽度默认父容器宽度容器内还可以放其他的行内元素，块元素
2.2 行内元素
span,a,strong,b,i,等都是行内元素
相邻的元素在同一行宽高无法自己设置，自己设置无效默认宽度就是自身的宽度内部最好只放文本
2.3 行内块元素
img,input,td,等同时具有行内和块元素的特点
相邻的元素在同一行,但是之间有空白缝隙，一行可显示多个默认宽度就是自身的宽度高，宽，内外边距可以控制
3 显示模式的转换
**特殊情况下,需要将元素突破限制,具有自己不具有的性质,比如:**a标签,是行内元素,但是我想设置宽高,也就是让其具有块元素的特点,就需要显示模式的转换:
display:block; # 让元素转换为块元素
display: inline; # 让元素转换为行内元素
display: inline-block; # 行内块元素4 背景
背景颜色:
background-color: transparent; # 默认的颜色透明
background-color: 颜色; # rgb ,十六进制等
background: rgba(0, 0, 0, 0.5); # 背景色半透明,0-1,0.5的0可省略写为.3背景图片:
background-image: none; # 默认的样式没有
background-image: url(地址); # 图片地址背景平铺:
background-repeat: repeat; # 图片默认样式，平铺
background-repeat: no-repeat; # 不平铺
background-repeat: repeat-x; # x轴平铺
background-repeat: repeat-y; # y轴平铺背景图片位置：
background-position: x y
background-position: left top; # 方位名词,两个词前后顺序无关,如果只指定一个,则第二个默认center
background-position: x y # 精确单位，必须是先x,后y
background-position: x y # 上面两个混合,必须是先x,后y背景图形附着
background-attachment: scroll; # 图像随内容滚动
background-attachment: fixed; # 图像固定背景复合属性
简化代码,必须严格准守这个顺序
background:color url 平铺 滚动 位置
5 三大特性
1. 层叠:如果给同一个标签,设置了两个不同的样式,比如color,会优先选择靠近的
2. 继承:
- **子标签会继承父标签的一些属性比如:**
text- font- line- color这些 行高继承,子标签会继承父类的行高
3.优先级:权重依次递增
4 权重叠加
权重会叠加但是不会进位
<title>权重叠加,不会进位</title>
<style>
/* 权重为 0001+0001=0002 */
ul li {
color: green;
}
/* 权重为0001 */
li {
color: chocolate;
}
/* 权重为 0010+0001=0011 */
.nav li{
color: pink;
}
</style>
</head>
<body>
<ui class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
</ui>
</body>6 盒子模型
6.1 边框
border:边框,盒子是有四个边的,如果想每个边定制border,可以针对border-top之类的单独设置css
边框会影响盒子的大小
div{
width: 200px;
height: 200px;
/* 简写
没有必须的顺序,一般顺序为 width stayle color
*/
border: 1px solid red;
/* border: rgb(255, 81, 0);
border-width: 1px; */
/* 实线边框 */
/* border-style: solid; */
/* 虚线边框 */
/* border-style: dashed; */
/* 圆点的虚线边框 */
/* border-style: dotted; */
}border-collapse:一般用于去掉表格的相邻边框,让其合并为一个,而不是重叠在一起的两个
table,td,th{
border: 1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
text-align: center;
}6.2 内外边距
**内边距: **内边距也会影响盒子的大小,
特殊情况下:当盒子没有指定宽度,或者高度的时候,不会影响盒子大小
外边距:常见应用:
块元素,水平居中,需要满足如下的条件
- 盒子设置了宽度,盒子的左右边距为
auto
div{
margin: 0 auto; # 一般都这样写
}行内快元素,水平居中:给父元素添加如下属性
div{
text-align: center;
}6.3 嵌套块元素塌陷
清除自带的内外边距
注意事项:
6.4 圆角边框
border-radius: 50px; # 内切圆的半径
border-radius: 50%; # 如果半径是不能整除的,想设置圆形可以使用这个
border-radius: 10px 20px 30px 40px; # 顺时针 6.5 阴影
6.6 文字阴影
7 浮动
7.1 浮动
网页布局的本质,使用css摆放盒子,css提供了三种传统的布局方式:
- 普通流(标准流): 按照默认的方式进行排列,从上往下排列,行内从左往右,全都是默认的样式
- **浮动: **
- 定位
**浮动的语法就是 **folat: 参数；
| 参数 | 解释 |
|---|---|
| left | 靠左 |
| right | 靠右 |
| none |
浮动的特点：
-
浮动的元素脱离标准流
(脱标)，有如下特点：- 脱离标准流到控制，移动到指定到位置
- 浮动到盒子不再保留原来的位置
-
浮动的元素一行内显示，并且元素顶部对齐：
-
浮动的元素具有行内块元素的特性
测试：让黄色div左浮动，绿色不动，可以看到，像有个z轴一样，黄色div距离屏幕更近了
有时候，并不是让元素浮动到页面的左侧，右侧，仅仅是在父元素内，因此一般采用如下策略：
先用标准流父元素上下排列好，之后子元素左右浮动排列
**注意:**浮动只会影响后面的标准流
7.2 清除浮动
因为子盒子高度不确定，比如一篇文章时长时短，因此父元素无法指定高度，但因为子元素浮动，因此父元素高度为0了，清除浮动，语法为：
clear: 属性值。
| 属性 | 描述 |
|---|---|
| left | 清除左浮动的影响 |
| right | 清除右浮动影响 |
| both | 全部清除，一般只用这个 |
如何解决下图的问题有如下几种方法：
- 额外标签法（隔墙法），也就是一行后加个标签，把前后隔开，让其不影响后面的标签
- 父元素添加
overflow - 父类元素添加
after伪类元素 - 父类添加
双伪元素
- 再来一个标签，让其清除浮动，这样上下就隔开了，注意这个标签，必须是块级元素
2.父元素添加overflow,属性值设置为三者其一：hidden，auto，scroll
hidden,优点代码简洁，缺点无法显示溢出内容
**3.**after伪类元素：
4.双伪元素，也就是在大盒子内部，前后都放一个盒子，让元素完全闭合，让元素无法跑出
8 定位
在这些情况的时候，标准流或者浮动无法实现
- 一个盒子在另一个盒子上面
- 滚动窗口时候，盒子是固定到屏幕的某个位置的
定位可以让盒子自由移动位置，可以压住其他盒子，并且可以固定位置
定位 = 定位模式+边偏移
定位模式用于指定元素在文档中的定位方式，边偏移决定了该元素的最终位置
定位模式
定位模式决定了元素的定位方式，它通过css的position属性来设置，其值可以分为四个：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
静态定位(了解)
- 元素默认的定位方式，也就是无定位，没有边偏移
相对定位
- 元素移动位置的时候，都是相对于它原来的位置说的(自恋型)。
- 继续占有原来的位置，不会脱标，后面的盒子不会占有他的位置
绝对定位
- 元素移动位置时候，是相对于祖先元素位置来说的。
- 如果没有父元素，或者父元素没有定位，则以整个浏览器页面为准
- 如果父元素有定位（相对，绝对，固定定位），则以最近一级有定位祖先的元素为参考点
- 不占有原来的位置，会脱标
子绝父相->子盒子是绝对定位，父元素是相对定位
固定定位
- 不随滑动改变位置，始终在页面的指定位置
粘性定位
- 以浏览器窗口为参照点
- 粘性定位占有原来的位置
- 必须添加：上下左右其中一个才会生效
边偏移
边偏移就是定位盒子移动到的最终位置，top,button,left,right四个属性
| 偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top：80px | 顶端偏移量，定义元素相对于其他父元素上边距的距离 |
| bottom | bottom:80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left：80px | 左侧偏移量，定义元素相对于其度元素左边线的距离 |
| right | right:80px | 右侧偏移量，定义元素相对于其度元素右边线的距离 |
z-index
定位的叠放顺序，如果同一位置有多个定位，如何让盒子按照顺序依次叠放？这就是z-index的作用
- 数值可以是正整数，负整数，0,默认为
auto，数值越大越靠上 - 如果值相同，则按书写顺序，后来者居上
- 只有定位的盒子才有此属性
9 元素的显示与隐藏
让元素在页面显示或者隐藏起来
display
在之前使用此元素主要是将元素转换为块，或者行内元素，而使用none属性还可以隐藏该元素
| 属性 | 含义 |
|---|---|
| none | 隐藏 |
注意：隐藏完元素后元素不会占用位置,后面盒子会占用它的位置
visibility 可见性
| 属性 | 含义 |
|---|---|
| inherit | 继承父元素的可见性 |
| visible | 可见 |
| hidden | 隐藏 |
| collapse | 主要用于隐藏表格的行或者列，很少用 |
overflow
只隐藏溢出的内容
| 元素 | 属性 |
|---|---|
| visible | 显示溢出元素(默认) |
| auto | 隐藏溢出元素，在需要的时候显示滚动条 |
| hidden | 隐藏溢出内容 |
| scroll | 隐藏溢出元素，但是显示滚动条，不溢出也会显示滚动条 |
10 精灵图
当一个页面图片很多的时候，每次访问服务器一次请求一张，效率非常低，因此将多个图片整合在一张图片，只需要请求一次即可。这就是精灵图(spries)
- 精灵图主要用于背景图片，像按钮图标之类的，可能会经常更换，因此不使用这个
- 使用原理就是，每次只展示盒子内的内容，然后通过
background-position：x y;移动盒子位置来展示不同的图标
background: url() x y ; //可以在这里设置简略写法，相当于两个标签合二为一11 字体图标
精灵图的缺点太过明显，现在都是采用的字体图标，展示的是图标，本质属于字体
优点有如下：
- 轻量：体积小，减小服务器压力
- 灵活：本质是文字，可以改变颜色，阴影，透明效果等
- 兼容性：支持所有浏览器
12 css三角
如果一个盒子宽高位0，而指定边框就会发现，四个角一人占一边，那么实现三角就很简单了，只需要让边框透明，然后设置一个边即可
<style>
.box{
width: 0;
height: 0;
border-left: 10px solid skyblue;
border-right: 10px solid orange;
border-top: 10px solid grey;
border-bottom: 10px solid tan;
}
/* 三角形 */
.box2{
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom: 10px solid skyblue;
}
</style>13 用户界面相关
- 更改鼠标样式
可以通过cursor属性，来更改鼠标移动到此元素上的样式
li {cursor : xxx; }| 属性 | 说明 |
|---|---|
| default | 默认鼠标样式 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
- 去掉表单，输入框的选择轮廓
{outline : none;}- 禁止拖动文本域
{resize : none;}14 vertical-align
- 使用
使用场景：用于实现图片，表单（行内块元素）或者文字的垂直对齐，比如常见的左侧头像，右侧文字，可以对图片设置此属性来实现对齐效果
一行文字从上到下四条线分别为： 顶线，中线，基线，底线
| 属性 | 描述 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶端对齐 |
| middle | 居中对齐 |
| bottom | 底部对齐 |
- 解决图片底部小缝隙
给图片加边框的时候会发现，图片底部与边框会有一个缝隙，原因就是图片和文字默认是基线对齐的
- vertical-align只要不设置基线对齐即可
- 将图片转换为块级元素
15 溢出文字省略号显示
- 单行文本溢出显示省略号
{
/* 强制一行内显示文本 */
white-space : nowrap; /*默认为normal->自动换行*/
/* 超出部分隐藏 */
overflow : hidden;
/* 文字用省略号代替 */
text-overflow: ellipsi
}- 多行文本溢出显示省略号
{
...
}16 布局技巧
- margin负值运用
如果并排四个盒子每个盒子都需要加1px的边框，则中间相邻的位置的边距为2px,这不是我们想要的，如果利用margin-left: -1px,则可实现左侧压住，这样就不会有2px问题了
这样又会存在另外的问题，如果想实现边框hover，但是中间边框被压住了咋办：使用相对定位即可，这样高度比其他元素高
{
position: relative
}而如果父元素也是绝对定位，这样也绝对定位还是被压住，使用z-index
{
z-index: 1;
}- 文字围绕浮动元素
如果想实现一个盒子中，左侧为图片，右侧为文字，传统方式就是两个盒子浮动，一个左浮动，一个右浮动，但其实还可以更简单，只需要左浮动，然后右边盒子占据了原来图片的内容，但是文字不会占据，就会被挤到右边了。
- 行内块的巧妙运用
<style>
*{
margin: 0;
padding: 0;
}
.box{
text-align: center;
}
.box a{
display:inline-block;
width: 36px;
height: 36px;
background-color: [[f7f7f7]];
border: 1px solid [[ccc]];
text-decoration: none;
color: #333;
line-height: 36px;
font-size: 14px;
}
.box .prev,.box .next{
width: 85px;
}
.box .current,.box .elp{
background-color: [[fff]];
border: none;
}
.box input{
height: 36px;
width: 45px;
border: 1px solid [[ccc]];
outline: none;
}
.box button{
width: 60px;
height: 36px;
font-size: 14px;
line-height: 36px;
color: #333;
background-color: [[f7f7f7]];
border: 1px solid [[ccc]];
}
</style>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>效果如下：
- css初始化
不同浏览器，有些标签的默认值是不同的，为了消除不同浏览器对html文本差异，需要css初始化，也叫做css的reset
每个网页都必须先进行css初始化，对一些内容赋予默认值
四 新特性
1 新增标签
1.1 语义化标签
html5新增语义化标签
| 标签 | 含义 |
|---|---|
| header | 头 |
| nav | 导航标签 |
| artical | 内容标签 |
| section | 内容标签 |
| aside | 侧边栏标签 |
| footer | 页脚 |
1.2 音频标签
新增音频标签
| 标签 | 含义 |
|---|---|
| audio | 音频 |
| video | 视频 |
video支持三种格式文件：mp4,webm,ogg
| 属性 | 值 | 含义 |
|---|---|---|
| src | 路径 | 文件地址 |
| autoplay | autoplay | 自动播放，谷歌浏览器需要加入muted属性 |
| controls | controls | 向用户展示播放控件 |
| width | 像素 | 设置宽度，使用css也可以 |
| height | 像素 | 设置高度 |
| loop | loop | 是否循环播放 |
| preload | auto(预先加载) none(不加载视频) | 是否预先加载 |
| poster | imgURl | 等待时候的图片 |
| muted | myted | 静音播放 |
audio支持三种格式音频：mp3,wav,ogg
| 属性 | 值 | 含义 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 向用户展示播放控件 |
| loop | loop | 是否循环播放 |
| src | url | 文件地址 |
1.3 新增input
| 属性值 | 说明 |
|---|---|
| 限制输入必须为email | |
| url | 限制输入必须为url |
| date | 限制输入必须为日期 |
| time | 限制输入必须为时间 |
| month | 限制输入必须为月 |
| week | 限制输入必须为周 |
| number | 限制输入必须为数字 |
| tel | 手机号码 |
| search | 搜索框 |
| color | 颜色选择器 |
1.4 新增表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示内容不能为空 |
| placeholder | 提示文本 | 提示信息 |
| autofocus | autofocus | 自动局聚焦属性 |
| autocomplete | off/on | 默认打开，在表单输入时候，会提示以前输入的内容 |
| multiple | mutiple | 可以多选文件提交 |
2 新增css
2.1 新增选择器
- 属性选择器
根据是否包含此属性选择此标签,比如选择输入框，然和type是普通文本的标签
input[type=text]{ /*选择所有表单属性是text的属性*/
...
}- 结构伪类选择器
**结构伪类选择器主要根据文档结构选择元素，通常用于：**根据父亲选择某个子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 选择父亲的第一个E子元素 |
| E:last-chlid | 选择父亲的最后一个E子元素 |
| E:nth:child(n) | 选择父亲的第n个E子元素 |
| E:fitst-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
伪元素选择器
伪元素选择器可以帮助我们利用css创建新标签，简化html结构。比如一些装饰性的标签就可以不写了。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入 |
| ::after | 在元素内部的后面插入 |
- before或者after创建一个元素，但都是
行内元素- 新创建的标签在文档树上是没有的，因此才叫伪元素
- **语法：**
元素::before{}- before和after必须要有
content属性- 伪元素选择器和标签选择器一样，权重为
1
使用场景1：伪元素配合字体图标
div {
position: relative;
width: 200px;
height: 20px;
border: #222 solid 2px;
border-radius: 5px;
}
div::after { /*伪元素*/
position: absolute;
top: 2px;
right: 10px;
font-family: 'icomoon';
content: ""; /*伪元素的内容*/
}仅仅一个div就实现了如下的效果：
使用场景2：实现仅仅一个div。就实现鼠标经过，有遮罩层的效果。
div{
/*....*/
}
/* 伪类 */
div::after{
content: '';
display: none; /*隐藏元素*/
position:absolute; /*因为伪类都是行内元素，加定位后才可设置宽高*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
div:hover::after{ /*鼠标经过现实*/
display: block;
}使用场景3：清除浮动，使用伪类不需要标签就可实现隔墙法
div::after{
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden; /*隐藏此元素*/
}但此方法，仅仅给行后面堵住了，前面没有清除，没有达到闭合的效果，因此如果前后都加伪元素会更好些：
div==beftor,div==after{
content:'';
display:table; /*让两个盒子放到一行上*/
}
div::after{
clear:both; /*清除浮动*/
}2.2 新增盒子模型
以前的盒子，如果加上border或者padding属性都会撑大盒子，这是非常麻烦的。css3中使用
box-sizing来指定盒子模型，有两个值content-box，border-box，这样我们计算盒子大小的方式就发生了变化。
- 之前默认的方式
content-box：盒子大小=width+padding+border - 设置为新的值
border-box：盒子大小=width，但如果padding+border大于宽度还是会撑大盒子
2.3 图片滤镜
css3新增滤镜属性
filter，将模糊或者颜色偏移等效果应用于元素
blur函数，里面的值越大越模糊
filter: blur(5px);
/*清除模糊，只需要再设置为0即可*/
filter: blur(0px); 2.4 calc函数
此函数可以声明属性的时候进行计算，比如宽高可以进行计算，可以进行
+ - * /操作
比如可以rag子盒子比父盒子永远小30px:
/*对子盒子设置宽度,因为100%就是父盒子的宽度，再-30这样就永远比父盒子小*/
width: calc(100%-30px);2.5 过度
transition可以仅仅 使用css就实现动画的效果，语法为：
transition: 要过度的属性 花费的时间 运动曲线 何时开始;- 属性：可以是宽高，背景颜色，内外边距，如果都变化，设置
all即可 - 何时开始：可设置延迟开始，不设置默认为0
- 运动曲线：默认是ease(可以省略)
| 属性 | 含义 |
|---|---|
| linear | 匀速 |
| ease | 逐渐变慢(默认) |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速再减速 |
口诀：谁做过度给谁加
2.6 2d转换
transform,可以让元素实现移动translate，旋转rotate，缩放scale
- 移动
translate
transform: translate(500px,0);
/* 只移动一个 */
transform: translateX(100px);
transform: translateY(100px);特点：
- 不会影响其他元素的位置
- translate(50%,50%)是相对与自己的
- 对行内标签没有效果
作用：可以使用此属性很方便的实现水平+垂直居中：这种方式让位置不是写死的，比原先的margin-top:-宽度更好用
position: absolute; /*绝对定位*/
width: 400px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); /*移动一半*/
border: rgba(179, 179, 179, 0.933) solid 1px;
border-radius: 5px;- 旋转
rotate
**让盒子，顺时针，逆时针旋转。**deg就是度的意思，正值是顺时针旋转，负值是逆时针旋转。
transform: rotate(45deg);
transform: rotate(-45deg);设置旋转中心点：默认的xy是50%，也就是中心点，也可以使用方位名词left，top等表示四个角
transform-origin: x y;- 缩放
scale
可以控制元素的大小变化,x，y分别为宽度和高度的倍数，此方式不会影响其他盒子，并且可以设置缩放中心点
transform: scale(x,y);
transform: scale(2,2); /*放大一倍*/
transform: scale(0.5,0.5); /*缩小一倍*/
transform: scale(1); /*等于scale(1,1)*/3 动画
元素可以添加多个动画，用逗号分割即可
3.1 基本动画
animation,是css3新增的属性，可以通过设置多个节点来精确的控制一个或多组动画，相较于过度，动画可以实现更复杂的效果。
定义动画，也叫做动画序列，动画的开始状态和结束状态，也可以使用form和 to关键字，百分比可以有多个，但必须是整数。百分比是时间的划分
@keyframes 动画名称{
0%{
transform: translateX(0px);
}
100%{
transform: translateX(1000px);
}
}使用动画：
/* 使用动画 指定动画名称*/
animation-name : move;
/* 持续时间 */
animation-duration: 5s;动画常见属性：
| 属性 | 描述 |
|---|---|
| @keyfiams | 定义一个动画 |
| animation | 别名 |
| animation-name | 要使用的动画的名字 |
| animation-duration | 持续时间，默认为0 |
| animation-timing-function | 动画的速度，默认为ease |
| animation-delay | 规定动画何时开始，默认0 |
| animation-iteration-count | 动画播放次数，默认0，可以为infinite |
| animation-direction | 动画是否在下一周期逆向播放，默认为normal，alternate为逆向 |
| animation-play-state | 动画开始或者暂停，默认是running，pause为暂停 |
| animation-fill-mode | **动画结束后的状态，默认是回到起始位置backwords，**forworks不回来 |
** 可以看到属性实在太多了，因此有如下的简写方式：**
animation: 动画名称 持续时间 运动速度 何时开始 播放次数 是否反向 开始h简写属性不包含
animation-play-state(开始-暂停)
3.2 速度曲线细节
基础的速度曲线有如下的五种属性，还有一种新的步长的形式。可以实现打字机的效果，一个一个展示
| 属性 | 含义 |
|---|---|
| linear | 匀速 |
| ease | 逐渐变慢(默认) |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速再减速 |
steps() |
指定了间隔的步长 |
4 3d转换
3d转换，类似于2d转换页多了一个y轴，可以基于浏览器的左上角便捷记忆，向右为x轴正值，向下为y轴正值，靠近人脸这一侧为z轴正值
4.1 3d位移
可设置三个位置位移
transform: translate3d(400px,100px,200px);4.2 透视
给父元素加上透视效果，相当于固定一个人眼在这个位置，这样页面z轴位移才会出现变大，变小的效果
perspective: 500px;4.3 3d旋转
可以设置三个角度的旋转
transform: rotateY(20deg);4.4 3d呈现
*** 控制子元素是否开启3维立体环境**
*** transform-style: flat 子元素不开启3d空间**
*** transform-style: preserve-3d 开启**
*** 代码写给父盒子，影响子盒子**
** 给父元素此属性，开启三维立体环境**
transform-style: preserve-3d;五 移动端
特殊样式:
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*去除点击高亮*/
-webkit-tap-highlight-color: transparent;
/*ios 有这个属性才能给按钮，输入框自定义属性*/
-webkit-appearance: none;
/*禁用长按页面弹出的菜单*/
img,a{
-webkit-touch-callout: none;
}