浮动
块级元素同行显示
- display:inline-block; 中间存在5px的间距,存在兼容问题
- 浮动
浮动
- 可以让元素同行显示,排列不下自动换行
- 语法:
float:left | right |none;
-
- left :左浮动
- right:右浮动
- none:不浮动,默认值
-
特点:
-
- 浮动元素可以同行显示,排列不下会自动换行,不存在兼容问题
- 浮动元素会脱离文档流,在标准文档流之上
- 原来的空间不存在,后续标准文档流元素会使用此空间
- 行内元素设置浮动后,支持宽高
- 浮动元素不会影响前面标准文档流元素的排列,但是会影响后面标准文档流元素的排列。并且浮动元素显示在标准文档流的上方
-
注意:
-
- 只有设置了浮动的元素,才可以同行显示
- 多个元素同时浮动,第一个浮动元素找父盒子的边界,后面的浮动元素找前面浮动元素的边界
- 块级元素设置浮动后,如果不设置width,默认是auto,宽度是由内容决定
标准文档流
- 概念:在页面布局过程中,元素按照从左到右,从上到下,块级元素独占一行,行级元素共享一行的排列规范
脱离文档流
- 概念:在页面布局过程中,元素不再遵循标准文档流,按照自己的排列规范来排列
浮动对非浮动的影响
-
非浮动元素会占用浮动元素原来的位置
-
非浮动元素里面的文本会被浮动元素挤出来
-
- 实现图文混排
<style>
img{
float: left;
width: 60px;
}
</style>
<img src="img/img-8.jpg" alt="">
<p>
特点: 浮动元素可以同行显示,排列不下会自动换行,不存在兼容问题 浮动元素会脱离文档流,在标准文档流之上原来的空间不存在行内元素设置浮动后,支持宽高注意:只有设置了浮动的元素,才可以同行显示多个元素同时浮动,第一个浮动元素找父盒子的边界,后面的浮动元素找前面浮动元素的边界块级元素设置浮动后,如果不设置width,默认是auto,宽度是由内容决定
</p>
- 子元素浮动,父元素高度塌陷
清除浮动
- 通过clear属性来清除浮动,清除浮动元素对非浮动元素的影响 ,写在受影响的元素身上
- 语法:
clear:left | right |both;
-
- left:清除左浮动的影响
- right:清除右浮动的影响
- both:清除左浮动和右浮动的影响
清除浮动的方法
- 给受影响的元素添加 clear属性
- 使用
- 使用空白的div添加clear样式将浮动元素和非浮动元素隔开
<div style="clear:both;"> </div>
- 给父元素添加伪元素选择器来清除浮动(推荐使用)
.clearfix::after{
content: "";
clear: both;
display: block;
}
注意:overflow:hidden可以解决子元素浮动,父元素高度塌陷的问题,是取消浮动的影响,借助BFC容器的特点,这个容器里面的浮动元素会参与父盒子的高度计算。
定位
如何让盒子移动到指定的位置
- margin赋值,破坏文档流进行移动
-
- 标准文档流:在页面布局过程中,元素从上到下,从左到右,块级元素独占一行,行级元素共享一行的排列规范
- 破坏文档流:在页面布局过程中,元素在移动过程中不遵循标准文档流的规范,移动完成之后仍然在标准文档流中
- 脱离文档流:在页面布局过程中,元素不再遵循标准文档流的规范,有自己的排列规范
应用场景:头部内容和banner重叠部分
- 定位:让元素移动到指定的位置
静态定位
- 概念:默认每个标签都是静态定位
position: static;
相对定位
- 概念:元素参考原来的的位置,按照指定的方向进行移动
position:relative;
-
- top:元素距离参考位置的上边缘的间距
- bottom:元素距离参考位置下边缘的间距
- left:元素距离参考位置左边缘的间距
- right:元素距离参考位置右边缘的间距
-
特点:
-
- 设置相对定位的元素会破坏文档流进行移动
- 只设置相对定位,元素不会有变化,一旦设置偏移量,破坏文档流参考元素原来的位置进行移动
- 原来的空间还占用,后面的盒子仍然以标准流的方式对待它
-
注意:
-
- 子元素设置相对定位,父元素进行移动时,子元素跟着移动,原因在于子元素原来的位置进行了移动,相对定位的元素是参考元素原来的位置进行移动,所以跟着移动
- 一般配合绝对定位一起使用
绝对定位
- 元素会脱离文档流,按照指定的位置进行移动
- 语法:
position:absolute;
-
- top:元素距离参考位置的上边缘的间距
- bottom:元素距离参考位置下边缘的间距
- left:元素距离参考位置左边缘的间距
- right:元素距离参考位置右边缘的间距
-
特点:
-
- 设置绝对定位的元素会脱离文档流
- 只设置绝对定位,元素是在当前位置脱离文档流,一旦设置了偏移量,如果设置了定位父级,参考最近的定位父级进行移动, 如果父级都没有定位,则以浏览器文档为准移动位置,static 静态定位不算定位
- 原来的空间不再占用
-
注意:
-
- 行内元素设置绝对定位后,元素支持宽高
-
重点
-
- 定位口诀 —— 子绝父相
绝对定位,要和带有定位的父级搭配使用,那么父级要用什么定位呢?
子绝父相 —— 子级是绝对定位,父级要用相对定位。
分析:
方向箭头叠加在其他图片上方,应该使用绝对定位,因为绝对定位完全脱标,完全不占位置。
父级盒子应该使用相对定位,因为相对定位不脱标,后续盒子仍然以标准流的方式对待它。
如果父级盒子也使用绝对定位,会完全脱标,那么下方的广告盒子会上移,这显然不是我们想要的。
结论:父级要占有位置,子级要任意摆放,这就是子绝父相的由来。
定位父级
-
结构父级:子元素在html代码中结构上的父标签
-
定位父级:设置的绝对定位的元素进行移动时的参考位置,默认按照整个文档进行移动,一旦父元素设置相对定位、绝对定位、固定定位后,参考最近的定位父级进行移动
-
注意:
-
- 定位父级可以使用相对定位、绝对定位、固定定位,一般使用相对定位(子绝父相)
- 如果设置了多个定位父级,参考最近的定位父级进行移动
固定定位
- 元素会脱离文档流,按照指定的位置进行移动,会固定在页面上,不会随着滚动条滚动
position:fixed;
-
- top:元素距离参考位置的上边缘的间距
- bottom:元素距离参考位置下边缘的间距
- left:元素距离参考位置左边缘的间距
- right:元素距离参考位置右边缘的间距
-
特点:
-
- 固定定位的元素会脱离文档流,在标准文档流之上
- 会固定在页面上,不会随着滚动条滚动
- 只设置固定定位,当前位置脱离固定在页面上,如果设置了偏移量,参考整个文档进行移动,固定在页面上
- 原来的空间不再占用
-
应用场景:头部导航固定、小广告、登录弹出框等等
粘性定位 sticky
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加 top 、left、right、bottom 其中一个才有效
- 有吸附效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
height: 1000px;
width: 100%;
background-color: skyblue;
margin-top: 1000px;
}
.box1 {
width: 80%;
height: 100px;
background-color: teal;
margin: 0 auto;
}
.box2 {
width: 200px;
height: 600px;
background-color: pink;
top: 0;
margin: 0 auto;
}
.sticky {
position: sticky;
bottom: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2 "></div>
<div class="box1 sticky"></div>
</div>
</body>
</html>
定位层级
- 概念:设置的元素定位层级,只针对相对定位、绝对定位,固定定位有效。
z-index: 数字;
-
- auto:默认值,相当于0,标准文档流里面的元素相当于0
- 数字:设置堆叠顺序
-
注意:
-
- 数字越大,定位层级越高,数字相同时,按照代码结构后面定位的元素显示在前面定位元素的上方
补充
相对定位、绝对定位,固定定位定位层级相同时下方盒子会盖住上方盒子,右方盒子会盖住左方盒子。
盒模型
标准盒模型
- width和height属性表示conten的长宽
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WZXUQIgB-1691941030123)(assets/images.jpg)]
上面就是一个标准盒模型:
- content:代表内容区域,存放内容,文本或者里面图片等等
- padding:内边距,盒子内部的空间,内容与边框之间的间距,相当于快递中的泡沫
- border:盒子的边框,四周边框可以分别设置。
- margin:代表外边距,盒子和盒子之间的间距(父子关系,兄弟关系)
边框border
- 给盒子添加边框
- 语法:
设置单独一条边框的样式
border-方位-width: 宽度;
border-方位-style: 类型;
border-方位-color: 颜色;
复合属性:
设置一条边框的样式
border-方位: 宽度 类型 颜色;
同时设置四条边框的 样式
border: 宽度 类型 颜色;
-
- 类型:solid 实线 dashed 虚线 dotted 点线 double双边线
-
注意:
-
- 边框必须设置知识两个值:宽度和类型,默认显示是黑色
- 边框可以撑大盒子
- 边框渲染原理:只设置一条边框时,显示为矩形,如果设置相邻的边,相接部分是沿着对角线均分
- 通过边框可以绘制三角形,设置三边透明,一边不透明
-
-
- transparent:设置透明的颜色
- 步骤:
-
-
-
-
- 设置一个width:0px的盒子
- 分别设置三边透明,一边不透明
-
-
内边距padding
- 设置盒子中内容到边框的距离
- 语法:
分别设置每个方向的内边距
padding-top:大小;
padding-left
padding-right
padding-bottom
复合属性
padding
设置一个值:上下左右
设置两个值:上下 左右
设置三个值:上 左右 下
设置四个值:上 右 下 左
- 注意:padding会撑大盒子,背景颜色会铺设padding区域
- 应用场景:可以作为导航左右间距
外边距margin
- 盒子与盒子之间距离,外边距
- 语法:
分别设置每个方向的内边距
margin-top:大小;
margin-left
margin-right
margin-bottom
复合属性
margin
设置一个值:上下左右
设置两个值:上下 左右
设置三个值:上 左右 下
设置四个值:上 右 下 左
margin重叠性
- 盒子和盒子之间是兄弟关系,margin在垂直方向会发生重叠,以其中最大的值为准
- 注意:margin在水平方向是叠加的
margin-top传递性
- 盒子和盒子之间是父子关系,子元素设置margin-top会传递给父元素
- 原因:子元素设置margin-top后找不到父元素的边界,就传递给了父元素
- 解决方案:
-
- 给父元素设置border:1px solid transparent;会更改盒子的大小
- 给父元素设置padding,也会改变盒子的大小
- 给父元素设置overflow:hidden;借助BFC容器的特点,容器里面的元素如何排列不会影响容器外面的元素。
标准盒子的大小的计算
css中设置的width和height分别代表内容区域(content)的大小
标准盒子真正的大小的计算:
- 宽度= content(width)+ padding 2(左右)+ border 2(左右)
- 高度=content(height)+ padding 2(上下) + border 2(上下)
标准盒子所占空间的大小计算:
- 宽度= content(width)+ padding 2(左右)+ border 2(左右) + margin * 2(左右)
- 高度=content(height)+ padding 2(上下) + border 2(上下)+ margin * 2(上下)
怪异盒模型(IE盒模型)
- 使用 box-sizing:border-box;来转化
- width和height属性包含 content、padding、border
- 一般用于解决固定布局之后调整padding、border后的界面变形
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MGvxpg1g-1691941030123)(assets/image-1691940022769.png)]
雪碧图的使用
步骤
- 将盒子宽高设置成要显示的图片的大小
- 使用background-image将雪碧图作为背景图片引入盒子
- 使用background-position调整背景图片显示位置
-
- 水平方向向右是x轴正轴,垂直向下是y轴正轴
.sprite-icons
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
.sprite-logo { background-position: -5px -0px; width: 265px; height: 65px; }
.sprite-test { background-position: -5px -70px; width: 30px; height: 30px; }
弹性盒子
弹性盒模型
-
概念:当页面需要适应不同屏幕尺寸的设备时,亦展现恰当的行为来适应屏幕的布局模式
-
目的:更加有效的对容器中的子元素进行排列、对齐和分配空白空间
-
特点
-
- 弹性盒子影响的是子元素,孙子辈及其之后的不会受影响。
弹性盒模型结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rgQycHah-1691941030124)(assets/image-1691940022824.png)]
- 弹性容器:弹性布局的整体布局,任何元素都可以设置属性成为弹性布局。
- 弹性项目:弹性容器里的布局模块,主要针对块级元素进行布局。
- 主轴:弹性项目排版的方向,默认为水平轴,可更改。
- 侧轴:与主轴向垂直相对的方向,默认为竖向,主侧轴类似与xy垂直坐标轴。
- 富裕空间:布局完剩余的空白空间,模块可进行排版的空间。
- 弹性空间:不属于自身,放大或缩小的空间
弹性容器
- 弹性容器的实现
display:flex ; //块级
display:inline-flex ; //行级
- 与浮动的区别,浮动元素一行排不下默认换行,弹性容器一行排不下默认压缩大小。
- 弹性盒子模式的父盒子自适应,没有高度塌陷的现象。
- 弹性容器常用样式
弹性容器属性
属性 | 描述 |
---|---|
flex-warp | 弹性项目是否换行。nowrap\wrap |
flex-direction | 弹性项目显示的方向,主轴方向。row\column\row-reverse\column-reverse |
justify-content | 设置弹性盒子元素在主轴方向上的对齐方式。flex-start\slex-end\center\space-between\space-around\space-evenly |
align-content | 修改flex-warp的行为,设置模块在侧轴方向上的行对齐方式。 |
align-items | 设置弹性盒子元素在侧轴方向上的对齐方式。默认值 stretch |
-
align-items 与align-content的区别
-
- 只有在容器设置高度的时候align-content才有效,类似justify-content,一般很少固定容器高度,所以使用较少。
弹性项目属性
algin-self | 与align-items类似,但是作用在一个模块上 |
---|---|
flex-grow | 伸张空间,参数为数字 1,3 |
flex-shrink | 压缩空间, 输入压缩因子 |
order | 设置弹性盒对象元素的顺序,数值越大显示越靠后 |
flex-basis | 设置弹性项目的宽度 |
flex | flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性flex: 0 1 200px; |
css继承
可以继承的样式
字体样式、文本样式、列表样式、鼠标样式(cursor),等显示样式
不可以继承的样式
高度、宽度,边框、margin、padding,等布局样式
手动继承 inherit
样式: inherit
圆角
复合属性:
border-radius:20px 20px 20px 20px/ 20px 20px 20px 20px;
带方位为具体指定的角
注意:
此属性设置的是边框圆角,当半径不大于边框宽度的时候不会影响到内容区域
阴影
/* 盒子阴影效果 */
box-shadow: 10px 10px 10px 10px rgb(255,25,255);
/*inset:表示阴影显示在盒子内容*/
box-shadow: 0 0 0 0 red inset;
/* x轴偏移量 y轴偏移量 模糊程度 颜色 */
text-shadow: 5px 5px 3px red;
/* 多个阴影用逗号分开 */
box-shadow: 10px 10px 10px 10px rgb(255,25,255),10px 10px 10px 10px rgb(255,25,255);
第一个参数:x轴的偏移量,默认0px正好在盒子下面
第二个参数:y轴的偏移量,默认0px正好在盒子下面
第三个参数:虚化效果,值越大,阴影虚化效果越好
第四个参数:阴影的大小,值越大,阴影越大
第五个参数:颜色 这个颜色可以用各种写法
四个参数也可以,代表阴影大小不用设置
背景渐变
基础写法
background-image: linear-gradient(pink,green,tomato);
background-image: repeating-linear-gradient();
颜色可以设置多个,但是至少要两个。
线性渐变色标
色标只要包含了颜色和位置。
可以控制每一个颜色到底占多少位置。动态控制颜色渐变效果
background-image: linear-gradient(pink 0%,tomato 100%);
如果两个色标中间没有过渡区间,颜色默认没有过渡效果
background-image: linear-gradient(pink 30%,tomato 30%);
线性渐变线方向
默认的颜色在页面上渲染出来,从上到下的方式来渲染
background-image: linear-gradient(45deg,pink 0%,tomato 100%);
background: linear-gradient(to top right,pink 10%,yellow 60%,blue )
可以设置角度,单位为deg,也可以是设置官方一些组合(to left top,to right bottom)
如果你用的deg角度,默认不要增加to
页面上没有写任何角度默认是180deg
径向渐变(扩展)
按照从指定的圆心开始,往外使用圆或椭圆的方式渐变
background-image: radial-gradient(circle at center center,red,yellow,green);
还可以设置半径
20px 30px 或者 20% 30% 都行 以及四个大小声明
closest-side (指定径向渐变的半径长度为从圆心到离圆心最近的边)
closest-corner (指定径向渐变的半径长度为从圆心到离圆心最近的角)
farthest-side (指定径向渐变的半径长度为从圆心到离圆心最远的边)
farthest-corner (指定径向渐变的半径长度为从圆心到离圆心最远的角)
第一个值:circle(圆)、ellipse(椭圆)
第二个值:圆心位置,at必须加上 (center left right bottom top)。自己定义px像素
第三个值:颜色,颜色也可以设置大小。
过渡效果
概念
- 有时候需要浏览器解析变化效果慢一点,指定一个时间让浏览器慢慢来执行,将这个过程称为过渡。
- transition提供了一种在更改css属性时控制动画速度的方法,可以让这个属性在指定时间内完成效果。
语法
- transition-property :需要过渡的属性
- transition-duration :过渡时间
transition-property:CSS属性名,css属性名2,css属性名3;
transition-duration:2s,1s;
- transition-timing-function:设置运动速率
默认值为ease:代表加速运动 ;linear:匀速运动
transition-timing-function:linear;
贝塞尔曲线:自定义
https://cubic-bezier.com/
cubic-bezier(.28,1.66,.95,-0.36)
- transition-delay :设置动画延迟时间,过了延迟时间整个过渡才会开始
transition-delay: 2s;
- transition 复合属性
transition: property duration linear
2D动画
概念
CSS2D动画也是平面动画,主要的动画控制在x轴和y轴。
主要动画包含
- 平移(位移):提供平移动画,按照你指定的方向进行移动,配合过渡效果
- 旋转:指定页面上元素,按照x轴或者y轴进行旋转,甚至z轴渲染
- 缩放:指定盒子在标准大小基础上,放大和缩小的功能。按照比例来缩放
- 斜切:一个盒子沿着x轴或者y轴进行拉伸变化,(正常盒子变成平行四边形)
- 动画基点:动画运行过程中参考中线点。
- 矩阵:了解
特点
- 2D动画不会影响其他元素的布局,改变margin来实现移动会影响
所有的2D动画都要用到一个共css代码
transform:动画类型
2D转换一般要配合transition过渡一起使用。
transition:transform
位移 translate
- 可以让盒子沿着x轴或y轴进行移动,不会影响其他盒子
沿着x轴和y轴进行移动
transform:translate( x轴移动量,y轴移动量 );
沿着x轴进行位移
transform:translate(x轴移动量);
transform:translateX(x轴移动量);
沿着y轴进行位移
transform:translateY(y轴移动量);
-
注意:
-
- 盒子是以原来的位置为起点,进行移动
旋转 rotate
- 可以让盒子进行旋转
围绕着盒子的中心点进行旋转,正值是顺时针方向,负值逆时针方向旋转
transform:rotate(角度);
围绕着x轴进行旋转
transform:rotateX(角度);
围绕着y轴进行旋转
transform:rotateY(角度);
- 注意:盒子没有厚度,如何围绕x轴或者y轴旋转90deg,盒子与视线平行,看不见盒子,从页面中消失
缩放 scale
- 可以让盒子进行放大和缩小
同时控制盒子的宽度和高度进行缩放
transform:scale(宽度的倍数,高度的倍数);
将盒子等比例缩放
transform:scale(倍数);
-
注意:
-
- 倍数为0,盒子消失
- 倍数为1,参考盒子原来的大小
- 倍数为0~1,盒子缩小
- 倍数大于1,盒子放大
- 盒子缩小和放大都是参考盒子的中心点进行缩放
倾斜 skew
- 可以让盒子沿着x轴或y轴进行倾斜转换
沿着x轴进行倾斜
transform:skew(角度);
transform:skewX(角度);
沿着y轴进行倾斜
transform:skewY(角度);
-
- skewX:沿着x轴倾斜,角度越大,越接近x轴,当角度为90deg时,会和x轴平行,消失不见
- skewX:沿着y轴倾斜,角度越大,越接近y轴,当角度为90deg时,会和y轴平行,消失不见
动画运动参考的基点 origin
一般情况下,我们运行基点都在盒子正中间,
transform-origin: 0px 0px; 左上角
transform-origin: left top
transform-origin: left
transform-origin: 5% 5%
组合变化
transform:rotate(180deg) translateX(100px);
Animation动画
完成自动播放的动画
- 编写JavaScript脚本完成自动播放的动画
- 可以使用flash计算完成动画设计
- 可以使用某些动画标签,比如marquee
- h5提供了canvas技术(绘图技术),来完成动画的设计
- CSS3提供了一种animation动画可以完成自动播放持续播放的动画
动画的概念
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SAaWoVIP-1691941030124)(assets/20210224224910.gif)]
- 动画:快速切换连续的图片而达到的流畅的画面效果。
- 帧数:一秒钟切换图片的数据,数量越多,画面越流畅。60hz(每秒钟切换60张图片)
- 关键帧:每一页的关键的画面
关键帧
- 概念:指盒子状态要发生改变的帧,就是设置需要播放的动画的步骤。一个完整的动画会被拆分为多个步骤,每一个步骤就是一个关键帧。
- 例子:盒子向右移动500px 有2个关键帧 开始状态和结束状态
- 例子:盒子变圆后向右移动500px 有3个关键帧 开始状态——变圆——右移500px
- css动画中,定义关键帧
动画的基本使用
-
先定义关键帧,再通过animation调用关键帧
-
步骤:
-
- 利用@keyframes属性来定义所有关键帧,给动画设置一个名称
- 给要使用的盒子添加animation的相关属性,指定动画的名称和执行时长
定义关键帧
- 利用@keyframes属性来定义关键帧,这个属性属于css代码,不需要写在任何选择器中。
- 语法:
定义关键帧
@keyframes 动画名称{
from{
开始状态
}
to{
结束状态
}
}
还可以使用百分比定义关键帧,百分比代表整个动画在某个百分比时,是什么状态
0%{
}
20%{
}
50%{
}
100%{
}
使用关键帧
div{
/* 设置动画的名称*/
animation-name:动画名称;
/*设置动画的执行时长*/
animation-duration:执行时长;
}
-
- 关键帧在设置过程中,可以使用百分比,from相当于0%,to相当于100%
- 每一帧的时间跟两帧之间的百分比有关系,跨度越大,分配的时间越多,跨度越小,分配的时间越少。
- 计算公式:关键帧的执行时间= 两帧之间的差 * 总动画的时间
动画属性
- animation动画属性可以控制动画的速率、次数等等操作
- 属性:
-
anination-name:设置动画的名称,需要配合执行时长一起使用
-
animation-duration: 设置动画的执行时长,默认值为0s;
-
animation-timing-function: 设置动画的执行速率,原理是通过贝塞尔曲线来实现的
-
ease:默认值,以低速开始,然后变快,在结束前变慢\
-
linear:匀速
-
ease-in:以低速开始
-
ease-out:以低速结束
-
ease-in-out:以低速开始和结束
-
cubic-bezier(x1,y1,x2,y2):贝塞尔曲线
-
animation-delay:设置动画的延迟时间,默认为0s
-
animation-iteration-count:设置动画的执行次数,默认动画只能执行一次
-
n: 数学,代表次数
-
infinite:无限次
-
animation-direction:设置动画的执行方向
-
normal:默认,正常播放
-
reverse:反向播放动画
-
alternate:奇数次正向播放动画,偶数次反向播放动画
-
alternate-reverse:奇数次反向播放动画,偶数次正向播放动画
-
animation-fill-mode:设置第一帧或最后一帧是否作用在元素上
-
forwards:设置最后一帧作用在元素上,保持结束状态
-
backwards:设置第一帧作用在元素上,保持开始状态
-
both:将第一帧和最后一帧都作用在元素上
-
animation-play-state:控制动画是否播放
-
running:默认值,播放
-
paused:暂停
-
-
animation:复合属性
-
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: 动画名称 执行时长 执行速率 延迟时长 执行次数 执行方向 是否保持开始或结束状态;