CSS基础（三）

七、 盒子模型

1. 边框属性

1.1 什么是边框?

边框就是环绕在标签宽度和高度周围的线条

1.2 边框属性的格式

1.2.1 连写(同时设置四条边的边框)

border: 边框的宽度 边框的样式 边框的颜色;

快捷键:

bd+ border: 1px solid #000;

注意点:

1.连写格式中颜色属性可以省略,省略之后默认就是黑色

2.连写格式中样式不能省略,省略之后就看不到边框了

3.连写格式中宽度可以省略,省略之后还是可以看到边框

 

1.2.2 连写(分别设置四条边的边框)

border-top: 边框的宽度 边框的样式 边框的颜色;

border-right: 边框的宽度 边框的样式 边框的颜色;

border-bottom: 边框的宽度 边框的样式 边框的颜色;

border-left: 边框的宽度 边框的样式 边框的颜色;

快捷键:

bt+ border-top: 1px solid #000;

1.2.3 连写(分别设置四条边的边框)

border-width: 上 右 下 左;

border-style: 上 右 下 左;

border-color: 上 右 下 左;

注意点:

1.这三个属性的取值是按照顺时针来赋值,也就是按照上右下左来赋值,而不是按照日常生活中的上下左右

2.这三个属性的取值省略时的规律

2.1上 右 下 左 >上 右 下 >左边的取值和右边的一样

2.2上 右 下 左 >上 右 >左边的取值和右边的一样 下边的取值和上边一样

2.3上 右 下 左 >上 > 右下左边取值和上边一样

1.2.4 非连写(方向+要素)

border-left-width: 20px;

border-left-style: double;

border-left-color: pink;

2. 内边距属性

2.1 什么是内边距?

边框和内容之间的距离就是内边距

2.2 格式

2.2.1 非连写

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

2.2.2 连写

padding: 上 右 下 左;

2.这三个属性的取值省略时的规律

2.1上 右 下 左 >上 右 下 >左边的取值和右边的一样

2.2上 右 下 左 >上 右 >左边的取值和右边的一样 下边的取值和上边一样

2.3上 右 下 左 >上 > 右下左边取值和上边一样

2.3 注意点:

1.给标签设置内边距之后,标签占有的宽度和高度会发生变化

2.给标签设置内边距之后,内边距也会有背景颜色

3. 外边距属性

3.1 什么是外边距?

标签和标签之间的距离就是外边距

3.2 格式

3.2.1 非连写

margin-top: ;

margin-right: ;

margin-bottom: ;

margin-left: ;

3.2.2 连写

margin: 上 右 下 左;

这三个属性的取值省略时的规律

1、上 右 下 左 >上 右 下 >左边的取值和右边的一样

2、上 右 下 左 >上 右 >左边的取值和右边的一样 下边的取值和上边一样

3、上 右 下 左 >上 > 右下左边取值和上边一样

 

3.3 注意点:

外边距的那一部分是没有背景颜色的

3.4 外边距合并现象

在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象,谁的外边距比较大就听谁的

4. 盒子模型

4.1 什么是CSS盒子模型?

CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

4.2 结论

在HTML中所有的标签都可以设置

宽度/高度  ==指定可以存放内容的区域

内边距  == 填充物

边框  == 手机盒子自己

外边距  == 盒子和盒子之间的间隙

5. 盒子模型的宽度和高度

5.1 内容的宽度和高度

就是通过width/height属性设置的宽度和高度

 

5.2 元素的宽度和高度

宽度 = 左边框 + 左内边距 + width + 右内边距+ 右边框

高度 同理可证

5.3 元素空间的宽度和高度

宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距+ 右边框+ 右外边距

高度 同理可证

6.盒子的box-sizing属性

6.1  什么是盒子的box-sizing属性

CSS3中新增了一个box-sizing属性,这个属性可以保证我们给盒子新增padding和border之后,盒子元素的宽度和高度不变

6.2 box-sizing属性保证盒子宽高的院里

和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变,那么就必须减去一部分内容的宽度和高度

6.3 box-sizing取值

6.3.1 content-box

         元素的宽高 = 边框 + 内边距+ 内容宽高

6.3.2 border-box

         元素的宽高 = width/height的宽高

7. 盒子居中和内容居中

7.1  text-align:center让内容居中

text-align: center;作用

设置盒子中存储的文字/图片水平居中

7.2  margin:0 auto让盒子自己水平居中

margin:0 auto;作用

让盒子自己水平居中

8.清空默认边距

8.1 为什么要清空默认边距(外边距和内边距)

在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距

8.2 如何清空默认的边距

格式

*{

            margin: 0;

            padding: 0;

}

 

8.3 注意点

通配符选择器会找导(遍历)当前界面中所有的标签,所以性能不好

企业开发中可以从这个网址中拷贝

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

企业开发中常用下面的格式清空默认边距body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

            margin:0;padding:0

        }

9.行高和字号

9.1 什么是行高?

在CSS中所有的行都有自己的行高

9.2 注意点:

行高和盒子高不是同一个概念

行高指的是每行内容的高度

盒子高指的是元素的高度

9.3 规律:

1.文字在行高中默认是垂直居中的

2.在企业开发中我们经常将盒子的高度和行高设置为一样,那么这样就可以保证一行文字在盒子的高度中是垂直居中的

简而言之就是:要想一行文字在盒子中垂直居中,那么只需要设置这行文字的"行高等于盒子的高"即可

3.在企业开发中如果一个盒子中有多行文字,那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中,只能通过设置padding来让文字居中

9.4 还原字体和字号

1.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准,不会以右边的内边距为基准,因为这个右边的内边距有误差

2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示,所以文字和内边距之间的距离就有了误差

3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离

八、网页的布局方式

1.网页布局方式概述

1.1 什么是网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

1.2 标准流(文档流/普通流)排版方式

1其实浏览器默认的排版方式就是标准流的排版方式

2在CSS中将元素分为三类,分别是块级元素/行内元素/行内块级元素

3 在标准流中有两种排版方式,一种是垂直排版,一种是水平排版

垂直排版, 如果元素是块级元素, 那么就会垂直排版

水平排版, 如果元素是行内元素/行内块级元素,那么就会水平排版

1.3 浮动流排版方式

1浮动流是一种"半脱离标准流"的排版方式

2浮动流只有一种排版方式,就是水平排版.它只能设置某个元素左对齐或者右对齐

注意点:

1.浮动流中没有居中对齐,也就是没有center这个取值

2.在浮动流中是不可以使用margin: 0 auto;

特点:

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的

无论是级元素/行内元素/行内块级元素都可以水平排版

2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

1.4 定位流排版方式

2. 浮动流布局方式

2.1 格式： 选择器｛float：left/right｝

2.2 浮动元素的脱标

2.2.1 什么是浮动元素的脱标?

脱标: 脱离标准流

当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标

2.2.2 浮动元素脱标之后会有什么影响?

如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

2.3 浮动元素排序规则

1. 相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面

2. 不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动

3. 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定

2.4  浮动元素贴靠现象

1.如果父元素的宽度能够显示所有浮动元素,那么浮动的元素会并排显示

2.如果父元素的宽度不能显示所有浮动元素,那么会从最后一个元开始往前贴靠

3.如果贴靠了前面所有浮动元素之后都不能显示,最终会贴靠到父元素的左边或者右边

2.5 浮动元素字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

2.6 浮动元素高度问题

在标准流中内容的高度可以撑起父元素的高度

而在浮动流中浮动的元素是不可以撑起父元素的高度的

2.7  清除浮动方式

2.7.1 清除浮动的第一种方式---给前面一个父元素设置高度

方式：给前面一个父元素设置高度

注意点:

在企业开发中, 我们能不写高度就不写高度,所以这种方式用得很少

2.7.2 清除浮动的第二种方式---给后面的盒子添加clear属性

方式：给后面的盒子添加clear属性

clear属性取值:

none: 默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动,右浮动找右浮动)

left: 不要找前面的左浮动元素

right: 不要找前面的右浮动元素

both: 不要找前面的左浮动元素和右浮动元素

注意点:

当我们给某个元素添加clear属性之后,那么这个属性的margin属性就会失效

2.7.3  清除浮动的第三种方式---隔墙法（了解即可）

方式：隔墙法

2.7.3.1 外墙法

1在两个盒子中间添加一个额外的块级元素

2给这个额外添加的块级元素设置clear: both;属性

注意点:

外墙法它可以让第二个盒子使用margin-top属性

外墙法不可以让第一个盒子使用margin-bottom属性

 

2.7.3.2内墙法

1在第一个盒子中所有子元素最后添加一个额外的块级元素

2给这个额外添加的块级元素设置clear: both;属性

 

注意点:

内墙法它可以让第二个盒子使用margin-top属性

内墙法它可以让第一个盒子使用margin-bottom属性

 

2.7.3.3 外墙法和内墙法区别?

外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

 

在企业开发中不常用隔墙法来清除浮动

2.7.4  清除浮动的第四种方式---利用伪元素选择器清除浮动

利用伪元素选择器清除浮动

本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙,其它特性和内墙法都一样

 

注意点:

IE6中不支持这种方式,为了兼容IE6必须给前面的盒子添加*zoom:1;属性

2.7.5清除浮动的第五种方式---利用overflow: hidden清除浮动

overflow: hidden;作用

1可以将超出标签范围的内容裁剪掉

2清除浮动

3可以通过overflow: hidden;让里面的盒子设置margin-top之后,外面的盒子不被顶下来

3.定位流布局方式概述

3.1 定位流分类

3.1.1 相对定位

3.1.2绝对定位

3.1.3固定定位

3.1.4静态定位

3.2  相对定位

3.2.1  什么是相对定位?

相对定位就是相对于自己以前在标准流中的位置来移动

3.2.2相对定位注意点

1相对定位是不脱离标准流的,会继续在标准流中占用一份空间

2在相对定位中同一个方向上的定位属性只能使用一个

3由于相对定位是不脱离标准流的,所以在相对定位中是区分块级元素/行内元素/行内块级元素

4由于相对定位是不脱离标准流的,并且相对定位的元素会占用标准流中的位置,所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

 

3.2.3 相对定位应用场景

1用于对元素进行微调

2配合后面学习的绝对定位来使用

3.3  绝对定位

3.3.1 什么是绝对定位?

绝对定位就是相对于父元素来定位

 

3.3.2  绝对定位注意点

1绝对定位的元素是脱离标准流的

2绝对定位的元素是不区分块级元素/行内元素/行内块级元素

3.3.3  绝对定位规律

1.默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body作为参考点

 

2.如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点

2.1只要是这个绝对定位元素的祖先元素都可以

2.2指的定位流是指绝对定位/相对定位/固定定位

2.3定位流中只有静态定位不行

 

3.如果一个绝对定位的元素有祖先元素,并且祖先元素也是定位流,而且祖先元素中有多个元素都是定位流,那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

3.3.4  绝对定位注意点

1.如果一个绝对定位的元素是以body作为参考点,那么其实是以网页首屏的宽度和高度作为参考点,而不是以整个网页的宽度和高度作为参考点

2.一个绝对定位的元素会忽略祖先元素的padding

3.3.5 子绝父相

1.相对定位弊端:

        相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面

2.绝对定位弊端:

默认情况下绝对定位的元素会以body作为参考点,所以会随着浏览器的宽度高度的变化而变化

基于以上原因，在实际开发中经常使用子元素用绝对定位,父元素用相对定位方式。

3.3.6  如何让绝对定位的元素水平居中

只需要设置绝对定位元素的left:50%;

然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

3.4  固定定位

3.4.1 什么是固定定位?

固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动 条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动

3.4.2 注意点:

1.固定定位的元素是脱离标准流的,不会占用标准流中的空间

2.固定定位和绝对定位一样不区分行内/块级/行内块级

3.4.3  z-index属性

默认情况下所有的元素都有一个默认的z-index属性,取值是0.

z-index属性的作用是专门用于控制定位流元素的覆盖关系的

1.默认情况下定位流的元素会盖住标准流的元素

2.默认情况下定位流的元素后面编写的会盖住前面编写的

3.如果定位流的元素设置了z-index属性,那么谁的z-index属性比较大,谁就会显示 在上面

 

注意点:

从父现象

1如果两个元素的父元素都没有设置z-index属性,那么谁的z-index属性比较大谁就显 示在上面

2如果两个元素的父元素设置了z-index属性,那么子元素的z-index属性就会失效,也就 是说谁的父元素的z-index属性比较大谁就会显示在上面

九、CSS3新增的三大模块

1.过度模块

1.1  过度模块的作用

通过CSS3 过渡，我们可以在不使用Flash 动画或JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

1.2  过度三要素

1必须要有属性发生变化

2必须告诉系统哪个属性需要执行过渡效果

3必须告诉系统过渡效果持续时

1.3注意点

当多个属性需要同时执行过渡效果时用逗号隔开即可

transition-property: width, background-color;

transition-duration: 5s, 5s;

1.4 示例

div{

            width: 100px;

            height: 50px;

            background-color: red;

            /*告诉系统哪个属性需要执行过渡效果*/

            transition-property: width, background-color;

            /*告诉系统过渡效果持续的时长*/

            transition-duration: 5s, 5s;

 

            /*transition-property: background-color;*/

            /*transition-duration: 5s;*/

        }

        /*:hover这个伪类选择器除了可以用在a标签上,还可以用在其它的任何标签上*/

        div:hover{

            width: 300px;

            background-color: blue;

        }

1.5  过度模块属性

transition-property: width,→告诉系统哪个属性需要执行过渡效果

transition-duration: 5s,→告诉系统过渡效果持续的时长

transition-delay: 2s;→告诉系统延迟多少秒之后才开始过渡动画

transition-timing-function: linear;→告诉系统过渡动画的运动的速度

1.6  过度模块连写

1.6.1 过渡连写格式

transition: 过渡属性 过渡时长 运动速度 延迟时间;

示例：transition: width 5s linear 0s,

1.6.2  过渡连写注意点

1和分开写一样,如果想给多个属性添加过渡效果也是用逗号隔开即可

2连写的时可以省略后面的两个参数,因为只要编写了前面的两个参数就已经满足了过渡的三要素

3如果多个属性运动的速度/延迟的时间/持续时间都一样,那么可以简写为

transition:all 0s;

1.7  编写过渡套路

1不要管过渡, 先编写基本界面

2修改我们认为需要修改的属性

3再回过头去给被修改属性的那个元素添加过渡即可

2.转换模块

2.1 转换模块的作用

CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

2.2  2D转换模块（上）

2.2.1 格式：transform: 方法（参数）；

2.2.2  2D转换方法

translate() 方法  平移

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x坐标） 和 top（y坐标）

示例：ul li:nth-child(3){

            /*

            第一个参数:水平方向

            第二个参数:垂直方向

            /

           transform: translate(100px, 0px);

        }

rotate() 方法   旋转

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

示例：ul li:nth-child(2){

            /*其中deg是单位,代表多少度*/

            transform: rotate(45deg);

        }

 

scale() 方法   变形

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）参数：

示例：ul li:nth-child(4){

            /*

            第一个参数:水平方向

            第二个参数:垂直方向

            注意点:

            如果取值是1,代表不变

            如果取值大于1,代表需要放大

            如果取值小于1,代表需要缩小

            如果水平和垂直缩放都一样,那么可以简写为一个参数

            */

            /*transform: scale(0.5, 0.5);*/

            transform: scale(1.5);

        }

skew() 方法---倾斜

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数：

示例：div

{

transform: skew(30deg,20deg);

}

matrix() 方法

matrix() 方法把所有 2D转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

示例：div

{

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

}

2.2.3 注意点

       1.如果需要进行多个转换,那么用空格隔开

       2.2D的转换模块会修改元素的坐标系,所以旋转之后再平移就不是水平平移的

   示例：transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

2.2.4  形变中心点

 

默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

 

格式：transform-origin:X  Y;

参数：

第一个参数:水平方向

            第二个参数:垂直方向

            注意点

            取值有三种形式

            具体像素

            百分比

            特殊关键字

示例：

transform-origin: 200px 0px;

transform-origin: 50% 50%;

transform-origin: 0% 0%;

transform-origin: center center;

2.3  2D转换模块（下）

2.3.1 概述

默认情况下所有元素都是围绕Z轴进行旋转，2D转换也可以设置元素围绕X轴或Y轴旋转。

2.3.2  2D转换方法（下）---围绕X轴或Y轴旋转、平移

rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

示例：ul li:nth-child(2) img{

            transform: rotateX(45deg);

        }

rotateY() 旋转

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

示例：ul li:nth-child(3) img{

            /*

            总结:

            想围绕哪个轴旋转,那么只需要在rotate后面加上哪个轴即可

            */

            transform: rotateY(45deg);

        }

translate() 方法→translateX（）和translateY（）同理

2.3.3  透视

所谓透视就是呈现近大远小的效果。

透视注意点：一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

格式：perspective: 500px;

2.3.4  盒子阴影和文字阴影

1.如何给盒子添加阴影

box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

 

2.注意点

2.1盒子的阴影分为内外阴影,默认情况下就是外阴影

2.2快速添加阴影只需要编写三个参数即可

box-shadow: 水平偏移 垂直偏移 模糊度;

默认情况下阴影的颜色和盒子内容的颜色一致

3.如何给文字添加阴影

text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色;

2.4  3D转换模块

2.4.1 概述   什么是2D和3D？

         2D就是一个平面,只有宽度和高度,没有厚度

         3D就是一个立体,有宽度和高度,还有厚度

         默认情况下所有的元素都是呈2D展现的

2.4.2  如何让某个元素呈3D展现

和透视一样, 想看到某个元素的3d效果,只需要给他的父元素添加一个transform-style属性,然后设置为preserve-3d即可

2.4.3  示例：制作正方体

1.通过ul标签和6个标签制造6个盒子模型，并给6个模型分别设置不同的背景色。然后通过子绝父相让6个盒子叠在一起。

2.分别让6个盒子通过旋转和平移组成正方体盒子。具体旋转方向和平移方向视具体情况而定。

3.给ul标签设置transform-style：preserve-3d，让ul旋转起来就可以看到正方体效果了。

2.4.4  代码展示

ul li:nth-child(1){background-color: red;

transform: rotateX(90deg) translateZ(100px);

}

ul li:nth-child(2){background-color: green;

transform: rotateX(180deg) translateZ(100px);

}

ul li:nth-child(3){background-color: blue;

transform: rotateX(270deg) translateZ(100px);

}

ul li:nth-child(4){background-color: yellow;

transform: rotateX(360deg) translateZ(100px);

}

ul li:nth-child(5){background-color: purple;

transform: translateX(-100px) rotateY(90deg);

}

ul li:nth-child(6){background-color: pink;

transform: translateX(100px) rotateY(90deg);

}

 

3  动画模块

3.1 作用

通过 CSS3动画模块，我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及 JavaScript。

3.2 过度和动画的异同

不同点

过渡必须人为的触发才会执行动画

动画不需要人为的触发就可以执行动画

相同点

过渡和动画都是用来给元素添加动画的

过渡和动画都是系统新增的一些属性

过渡和动画都需要满足三要素才会有动画效果

3.3  动画模块三要素

1.告诉系统需要执行哪个动画

示例：animation-name: lnj;

2.告诉系统我们需要自己创建一个名称叫做lnj的动画

示例：@keyframes lnj {

            from{

                margin-left: 0;

            }

            to{

                margin-left: 500px;

            }

        }

对于复杂动画使用from（）to（）显然不能满足需求，这是我们可以使用百分比帧来满足我们的需求

示例：@keyframes sport {

            0%{ left: 0; top: 0; }

            25%{ left: 300px; top: 0; }

            50%{left: 300px; top: 300px; }

            75%{ left: 0; top: 300px; }

            100%{  left: 0; top: 0; }

        }

3.告诉系统动画持续的时长

示例：animation-duration: 3s;

3.4 动画模块其他属性

 

animation-delay: 2s;→告诉系统多少秒之后开始执行动画

 

animation-timing-function: linear;→ 告诉系统动画执行的速度

 

 

animation-iteration-count: 3; →告诉系统动画需要执行几次

如果取值为infinite则规定动画应该无限次播放。

 

animation-direction: alternate; →告诉系统是否需要执行往返动画

取值:

            normal, 默认的取值,执行完一次之后回到起点继续执行下一次

alternate, 往返动画,执行完一次之后往回执行下一次

 

animation-play-state: paused; →告诉系统当前动画是否需要暂停

取值:

            running: 执行动画

            paused: 暂停动画

 

animation-fill-mode: both; →指定动画等待状态和结束状态的样式

取值:

            none: 不做任何改变

            forwards: 让元素结束状态保持动画最后一帧的样式

            backwards: 让元素等待状态的时候显示动画第一帧的样式

both: 让元素等待状态显示动画第一帧的样式,让元素结束状态保持动画最后一帧的样式

3.5 动画模块连写

1.动画模块连写格式

animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

 

2.动画模块连写格式的简写

animation:动画名称 动画时长;