【笔记】CSS学习笔记

发表于 更新于 分类于 阅读次数：

前言

层叠样式表是一种用来为结构化文档添加样式的计算机语言，由W3C定义和维护。当前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。（维基百科）

语法规则

1
2
3
选择器 {
  样式声明;
}

使用的方式

内联样式（行内样式）

  • 写在HTML标签内

样式声明：样式属性:样式值

1
<any style="样式声明"></any>

内部样式

  • 在<style></style>标签内写样式
  • <style></style>标签写在<head></head>标签内
1
2
3
4
5
<head>
    <style>
        ...
    </style>
</head>

外部样式

  • 在<head></head>引用外部.css文件

herf：资源路径

1
<link rel="stylesheet" herf="">

优先级

  • 如果多个样式作用到一个元素上，样式冲突，则按照样式规则的优先级应用

最低：浏览器默认样式
就近原则：哪个样式距离元素近，就选哪个
最高：内联样式

选择器的权值

  • 标识当前选择器的重要程度，权值越大优先级越高
  • 当一个选择器中包含有多个选择器时，需要将所有选择器权值进行相加，然后比较权值大的优先显示
  • 权值相同，就近原则
  • !important，直接获取最高优先级，内联样式不允许加!important
  • 群组选择器的权值，单独计算，不能相加
  • 选择器权值的计算，结算结果不能超过本身的最大数量级

!important>1000
内联样式=1000
id选择器=100
类/伪类选择器=10
元素选择器=1
通用选择器=0
继承的样式=null

调整优先级

  • 放在属性之后，与属性值用空格分开，可以把该样式属性的优先级调到最高
1
!important <规则>

选择器

基础选择器

通用选择器

1
* {样式声明}

标签选择器（元素选择器）

1
元素名称 {样式声明}

id选择器

1
#元素的id属性值 {样式声明}

类选择器

1
.元素的class属性值 {样式声明}
类名的规范
  • 类名不能以数字开头
  • 除了-_不能带其他符号
  • 尽量见名知意
多类选择器
1
<any class="类名1 类名2 类名2"></any>

群组选择器

  • 将多个选择器放在一起定义公共样式
1
选择器1,选择器2,选择器3 {样式声明}

后代选择器

  • 一代或者多于一代的嵌套
1
选择器1 选择器2 选择器3 {样式声明}

子代选择器

  • 一级嵌套
1
选择器1>选择器2 {样式声明}

伪类选择器

  • 匹配元素的不同状态

匹配链接未访问的状态

1
基础选择器:link {样式声明}

匹配链接已访问的状态

1
基础选择器:visited {样式声明}

匹配鼠标悬停时的状态

1
基础选择器:hover {样式声明}

匹配元素被激活的状态

1
基础选择器:active {样式声明}

注意：以上四个有顺序要求，才不会冲突

匹配元素获取焦点时的状态

1
基础选择器:focus {样式声明}

匹配不可使用的表单元素

1
基础选择器:disable {样式声明}

匹配空文本的标签

1
基础选择器:empty {样式声明}

匹配被激活的锚点

1
基础选择器:target {样式声明}

属性选择器

  • 通过元素的内置属性或自定义属性
1
2
3
标签名[属性名] {样式声明}

标签名[属性名="属性值"] {样式声明}

模糊匹配属性值

以模糊值开头
1
标签名[属性名^="模糊值"] {样式声明}
以模糊值结尾
1
标签名[属性名$="模糊值"] {样式声明}
包含模糊值
1
标签名[属性名*="模糊值"] {样式声明}

子类选择器（不区分子元素类型）

匹配子代第一个元素

1
基础选择器:first-child {样式声明}

匹配子代最后一个元素

1
基础选择器:last-child {样式声明}

匹配子代指定位置的元素

  • 下标从1开始

<num>：指定位置。不但可以是纯数字，也可以是一个包含n的函数

1
基础选择器:nth-child(<num>) {样式声明}

匹配子代指定倒数位置的元素

  • 下标从1开始
1
基础选择器:nth-last-child(<num>) {样式声明}

子类选择器（区分子元素类型）

  • 依次匹配每个父级对应的子级

匹配子类指定类型第一个元素

1
基础选择器:first-of-type {样式声明}

匹配子类指定类型最后一个元素

1
基础选择器:last-of-type {样式声明}

匹配子类指定类型指定位置的元素

  • 下标从1开始
1
基础选择器:nth-child(<num>) {样式声明}

匹配子类指定类型指定倒数位置的元素

  • 下标从1开始
1
基础选择器:nth-last-child(<num>) {样式声明}

匹配属于其父元素唯一的子元素

1
基础选择器:only-child {样式声明}

关系型选择器

同级紧随其后的一个兄弟元素

1
选择器1+选择器2 {样式声明}

同级紧随其后的所有兄弟元素

1
选择器1~选择器2 {样式声明}

伪元素选择器

匹配第一个字符

1
2
3
基础选择器:first-letter {样式声明}

基础选择器::first-letter {样式声明}

匹配第一行字符

1
2
3
基础选择器:first-line {样式声明}

基础选择器::first-line {样式声明}

匹配鼠标选中的字符

1
基础选择器::section {样式声明}

否定伪类

  • 符合selector的元素都不要
1
elem:not(基础选择器) {样式声明}

内容生成

  • 使用css命令，添加html元素
  1. 只可以给双标签添加伪元素
  2. 必须有content属性
  3. 必须脱离文档标准流

  • 伪元素的content属性是设置文字内容，默认可以传空字符串

  • 伪元素在同一个标签内部只可以有两个（每种一个），如果超出两个，后者覆盖前者

在元素的内容区域的最前面添加一个伪元素

1
2
3
基础选择器:before {样式声明}

基础选择器::before {样式声明}

在元素的内容区域的最后面添加一个伪元素

1
2
3
基础选择器:after {样式声明}

基础选择器::after {样式声明}

尺寸

  • 设置元素的宽度和高度
1
2
3
4
5
6
7
8
width: ;
height: ;

max-width: ;
min-width: ;

max-height: ;
min-height: ;

页面中允许设置尺寸的元素

span：设置背景色的宽高
div：设置背景色和宽高
input：设置宽高

  • 块级元素可以设置宽高，如果不设置宽，默认宽是父元素的100%，如果不设置高，默认高靠内容撑开
  • 行内元素设置宽高无效，宽高靠内容撑开
  • 行内块可以设置宽高，行内块默认自带宽高，不同浏览器解析不同（span、input）
  • 自带宽高属性的元素，可以设置样式的宽高（img、table）

单位

绝对单位

px：像素，逻辑像素和物理像素
in：英寸，1in-2.54cm
pt：磅，1pt=1/72in，多用于字体大小
cm：厘米
mm：毫米

相对单位

%：占父元素宽度的%
em：相对父元素的数值，乘以的倍数，项目中使用较少
rem：相对于html标签定义的数值，乘以的倍数，项目中经常使用

溢出处理

  • 内容多，容器小，会发生溢出
  • 默认溢出显示，默认纵向溢出
1
2
3
overflow: ;
overflow-x: ;
overflow-y: ;

取值

visiable：默认值，缺省值，溢出部分可见
hidden：溢出部分隐藏
scroll：不管是否溢出，都有滚动条
auto：溢出就有滚动条，不溢出就没有

合法的颜色值

  • 颜色的英文单词
  • # + 6个16进制数
  • # + 3个16进制数
  • rgb(r,g,b) 10进制数 0～255
  • rgb(r%,g%,b%) 255的百分比
  • rgba()

边框

1
border: width style color;

取值

width：边框的粗细，单位px
style：边框的样式

solid：实线（默认缺省值）
dotted：点点虚线
dashed：线条虚线
double：双实线

color：边框颜色，合法颜色值

transparent：透明

单边设置

1
2
3
4
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;

单属性设置

1
2
3
border-width: ;
border-style: ;
border-color: ;

单边单属性设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
border-top-width: ;
border-top-style: ;
border-top-color: ;

border-right-width: ;
border-right-style: ;
border-right-color: ;

border-bottom-width: ;
border-bottom-style: ;
border-bottom-color: ;

border-left-width: ;
border-left-style: ;
border-left-color: ;

清除边框

1
2
3
border: 0;

border: none;

边框的倒角（圆角）

单位：px、%

1
2
3
border-radius: 四个角同时设置;

border-radius: 左上角 右上角 右下角 左下角;

边框阴影

外阴影

1
box-shadow: h-shadow v-shadow spread color;

取值

h-shadow：水平方向的偏移量
v-shadow：垂直方向的偏移量
spread：阴影的模糊距离，数值越大越模糊
blur：阴影的尺寸
color：阴影的颜色
inset：设置为内部阴影，值为inset

多个阴影

1
2
box-shadow: h-shadow v-shadow spread color,
            h-shadow v-shadow spread color;

内阴影

1
box-shadow: inset h-shadow v-shadow spread color;

多个阴影

1
2
box-shadow: inset h-shadow v-shadow spread color,
            inset h-shadow v-shadow spread color;

轮廓

  • 边框外面的一根线
1
outline: width style color;

清除轮廓

1
2
3
outline: 0;

outline: none;

边距

盒子模型（框模型）

  • 元素在页面上实际占地空间的计算方法

外边距：外框以外的距离（元素与元素之间的距离）
内边距：外框与内容区域之间的距离

元素默认实际占地宽度=左外边距+左边框+左内边距+内容区域的宽度+右内边距+右边框+右外边距
元素默认实际占地高度=上外边距+上边框+上内边界+内容区域高度+下内边距+下边框+下外边距

关于块级、行内、行内块元素的总结

块级 行内 行内块
设置宽度有效 宽高无效 设置宽高有效
不写宽，默认宽的父元素宽度100%，不写高，内容撑开；单独成行 宽高都是内容撑开；与其他行内和行内块元素共用一行 默认自带宽高，不同的浏览器解析效果不同；与其他行内和行内块元素共用一行
上下外边距有效 上下外边距无效 上下外边距有效，改变一行中某一个行内块上下外边距，本行内其他元素，跟着一起位移

外边距

1
2
3
4
5
6
margin: ;

margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

取值

以px为单位的数字
以%为单位的数字，父元素的百分比
负数

auto

必须左右外边距一起用
块级元素本身水平居中
上下外边距auto无效

外边距的简写方式

1
2
3
4
5
6
7
margin: 上下左右;

margin: 上下 左右;

margin: 上 左右 下;

margin: 上 右 下 左;

自带内外边距的元素

  • h1~h6、p、body、ol、ul、dl、pre

由于不同浏览器对这些元素外边距大小的解析，在开发时候，我们要做css reset样式重置

1
2
3
4
* {
    margin: 0;
    padding: 0;
}

内边距

1
2
3
4
5
6
padding: ;

padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

取值

padding没有auto这个值
以px为单位的数字
以%为单位的数字，父元素宽度的百分比

内边距的简写方式

1
2
3
4
5
6
7
padding: 上下左右;

padding: 上下 左右;

padding: 上 左右 下;

padding: 上 右 下 左;

背景

背景颜色

1
backgroung-color: ;

背景图片

  • 使用背景图片可以让元素内部的子元素，堆叠显示在背景图上，而img标签，默认不能堆叠显示
1
background-image: url();

此处的路径，可以加双引号，可以加单引号，可以不加引号

背景图片的平铺

1
background-repeat: ;

取值

repeat：默认值，平铺
no-repeat：不平铺
repeat-x：水平轴平铺
repeat-y：垂直轴平铺

背景图片的定位

单位：px、%

1
background-position: x y;

取值

横向的取值：left/center/right
纵向的取值：top/center/bottom

背景图片的尺寸

单位：px、%

1
background-size: ;

取值

一个值：同时控制横纵
两个值：分别控制横纵
cover：覆盖和填充。让背景图充满整个容器，哪怕图片显示不完全，也要充满容器
contain：包含。让容器显示完整的图片，哪怕容器有空白区域，也要包含完整的图片

背景图片的固定

1
background-attachment: ;

取值

scroll：默认值，背景图会随着窗口滚动条一起滚动
fixed：背景图相对窗口位置固定，窗口滚动，背景图位置不变，但是只能在原容器内显示（如果背景图设置了fixed，那么background-position会根据浏览器窗口定位）

背景的简写方式

1
background: color url repeat attachment position;

最简方式

1
2
3
background: color;

background: images;

背景起源

1
background-origin: ;

取值

border-box：从外边框开始起源
padding-box：从内边框开始起源（缺省值）
content-box：从内容区域开始起源

背景裁切

1
background-clip: ;

取值

border-box：从外边框开始裁切
padding-box：从内边框开始裁切
content-box：从内容区域开始裁切
-webkit-text：图片置入文本内部（有兼容问题，需要加浏览器私有前缀，文字要加透明度）

渐变

文本

字号

单位：px、pt、rem、em

1
font-size: ;

字体

1
font-family: ;

取值

（PC中已安装的）字体名称

多个字体名称用,隔开
字体名称包含空格建议使用""

服务器下载字体

  • 优先使用本地，如果没有下载
1
2
font-family: 字体名称;
src: url, local;

url：字体文件链接
local：该字体在本地存储名称

字体加粗

1
font-weight: ;

取值

lighter：最细
normal：正常
bold：较粗
bolder：最粗
不带单位的数字：必须是100的倍数，最大值是1000

字体样式

1
font-style: ;

取值

normal：正常（缺省值）
italic：倾斜

小型大写字母

1
font-variant: small-caps;

简写方式

1
font: style variant width size family;

最简方式

1
font: size family;

文本属性

字体颜色

1
color: ;

文本对齐方式

1
text-align: ;

取值

left：居左对齐
center：居中对齐
right：居右对齐
justify：两端对齐

行间距

1
line-height: ;

取值

以px为单位的数字
无单位数字，代表行高是字号的倍数

文本线条

1
text-decoration: ;

取值

none：没有线条修饰，去除超链接下划线
underline：下划线
overline：上划线
line-through：删除线

首行缩进

1
text-indent: ;

文本阴影

1
text-shadow: h-shadow v-shadow blur color;

h-shadow：水平方向偏移
v-shadow：垂直方向偏移
blur：模糊距离
color：阴影颜色

多个阴影
1
2
text-shadow: h-shadow v-shadow blur color,
             h-shadow v-shadow blur color;

设置文本溢出元素框时的处理方式

1
text-overflow: ;

取值

clip：裁剪文本内容，默认值
ellopsis：显示省略号，用于替代被裁剪的文本内容

规定自动换行方式

1
word-break: ;

取值

normal：默认值，使用浏览器默认换行规则
break-all：允许在单词内换行
keep-all：只能在半角空格或连字符处换行，主要用于中文、日文、韩文

规定单词的换行方式

1
word-wrap: ;

取值

normal：默认值，只在允许的断字点换行
break-word：可以在长单词或者url中间换行

列表属性

设置列表项标记的类型

1
list-style-type: ;

取值

disc：实心圆
circle：空心圆
square：方块
decimal：数字
low-roman：小写罗马数字
upper-loman：大写罗马数字
low-alpha：小写字母
upper-alpha：大写字母
none：无标记
inherit：继承父元素设置

规定列表中列表项目标记的位置

1
list-style-position: ;

取值

outside：默认值。保持标记位于文本的左侧，列表项目标记位置在文本，且环绕文本，不根据标记对齐
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
inherit：继承父类的list-style-position设置

属性使用图像来替换列表项的标记

1
list-style-image: ;

取值

url：图像的路径
none：默认无图像显示
inherit：继承父类的list-style-position设置

简写

1
list-style: ;

取值

type
position
image

表格

table

  • 尺寸、边框、背景、字体、文本、内外边距

设置边框

  • 只会设置最外层的最大边框
1
table: ;

td/th

  • 尺寸、边框、背景、字体、文本、内边距、外边距无效

指定单元格数据的垂直对齐方式

1
vertical-align: ;

取值

top
middle
bottom

表格特有属性

边框合并

1
border-collapse: ;

取值

separate：默认值，边框分离状态
collapse：边框合并状态

设置边框间距

  • 必须保证是边框分离状态
1
border-spacing: ;

取值

一个值，设置水平和垂直的间距
两个值，第一个是水平，第二个是垂直

设置表格的显示规则

  • 用来设置浏览器渲染表格的方式
1
table-layout: ;

取值

auto：默认值，自动表格布局，td/th的尺寸实际上由内容决定，内容比尺寸大，按内容显示，内容比尺寸小，按尺寸显示，现存入内存，再一次性渲染
fixed：固定表格布局，不管内存多大，都按照设置的尺寸显示，不存入内存，直接渲染

定位

  • 设置元素在页面上的位置

分类

普通流定位
浮动定位
相对定位
绝对定位
固定定位

普通流定位（默认文档流）

  • 每个元素在页面上都有自己的控件（不能堆叠）
  • 每个元素都是从父元素的左上角开始显示（绘制）
  • 块级元素按照从上到下的方式，逐个排列，每个元素单独成行
  • 行内和行内块在一行中，从左往右逐个排列，一行放不下，换行

浮动定位

  • 让块级元素横向显示的时候，使用浮动定位
1
float: ;

取值

none：不浮动，默认文档流
left：左浮动，让元素脱离文档流，在当前行向左看齐
right：右浮动，让元素脱离文档流，在当前行向右看齐

浮动的特点

  • 元素一旦浮动，就脱离文档流（不占用页面空间，后面元素上前补位）
  • 浮动元素，会停靠在父元素的左/右边，或者其他已浮动元素的边缘
  • 父元素横向显示不下所有浮动元素时，显示不下的部分，会自动换行
  • 浮动，解决多个块元素横向显示的问题

清除浮动效果

  • 一个元素不浮动，前面已浮动的兄弟元素给他带来了影响

影响：需要这个元素上前补位
清除浮动效果带来的影响：不上前补位

1
clear: ;

取值

none：默认，不清除
left：清除左浮动带来的影响
right：清除右浮动带来的影响
both：清除左右浮动带来的影响

显示

显示效果

1
visibility: ;

取值

visible：默认值，可见
hidden：隐藏，看不见，但是不脱离文档流

显示方式

  • 设置元素在页面中的表现形式（块级、行内、行内块、table）
1
display: ;

取值

none：隐藏，脱离文档流的隐藏
block：块级，让元素按照块级元素的方式显示
inline：行级，让元素按照行内元素的方式显示
inline-block：让元素按照行内块的方式显示
table：让元素按照表格的方式显示

相对，绝对，固定

1
position: ;

取值

static：默认值，静态（默认文档流）
relative：相对定位
absolute：绝对定位
fixed：固定定位

  • 当一个元素设置了position，并且取值为relative/absolute/fixed中的一种时，那么这个元素被称为已定位元素，已定位元素自动解锁4个偏移属性
+ -
top 向上 向下
left 向右 向左
right 向左 向右
bottom 向上 向下

左右冲突，以左为准
上下冲突，以上为准

相对定位

  • 单写relative，页面没有任何改变，配合偏移属性使用
1
position: relative;

绝对定位

  • 配合偏移属性
  • 绝对定位脱离文档流
1
position: absolute;
绝对定位的参照物
  • 如果绝对定元素的祖先元素，没有已定位元素，相对body左上角位移
  • 绝对定位元素相对于自己，最近的、已定位的、祖先元素的左上角位移

固定定位

  • 配合偏移属性
  • 固定定位脱离文档流
  • 相对于<body>偏移，永远停留在可视区域
1
position: fixed;

堆叠顺序

  • 默认堆叠顺序，后写的堆叠顺序高（是html元素编写的先后）
  • 只有已定位的元素，可以设置堆叠顺序
  • 堆谐顺序对父子级无效，儿子永远在父亲的上面
1
z-index: ;

取值

无单位的数字

转换

  • 改变元素在页面中的位置，大小，角度，以及形状

2D转换
3D转换

转换属性

  • 转换原点，对旋转产生影响
1
transform: ;

取值：一个或多个转换函数，多个转换函数之间用空格分开

1
transform-origin: ;

取值

两个值，把原点放在x轴和y轴上
三个值，添加了z轴

以px或%为单位的数字
关键字：left/center/right top/center/bottom

2D转换

位移

  • 改变元素的位置
1
transform: ;

取值

translate(x)：指定元素在x轴上的位移
translateX(x)：指定元素在x轴上的位移
translateY(y)：指定元素在y轴上的位移
translate(x,y)：同时设置x，y轴的位移，正数：x轴或y轴正方向，负数：x轴或y轴负方向

旋转

  • 改变元素的角度

单位：deg

1
transform: ;

取值

rotate()：旋转偏移量

正数：顺时针，负数：逆时针

注意：
旋转原点会影响旋转效果
旋转连同坐标轴一起旋转，会影响旋转之后的位移方向

缩放

  • 改变元素的大小
1
transform: ;

取值

取一个值：scale(val)
取两个值：scale(val,val)

val>1：x轴和y轴同时放大
0<val<1：x轴和y轴同时缩小
-1<val<0：x轴和y轴同时缩小，翻转
val<-1：x轴和y轴同时放大，翻转

分别取两个值：分别设置x轴和y轴的缩放

scaleX(val)
scaleY(val)

倾斜

  • 让元素向着x轴倾斜，实际上改变的是y轴的角度

单位：deg

1
transform: ;

取值

skew()、skewX()：倾斜偏移量

正数：y轴顺时针旋转，负数：y轴逆时针旋转

3D转换

  • 如果元素发生了旋转，整体坐标系会发生变化

透视距离（景深）

  • 3D旋转需要父子级元素
  • 父级元素表示场景，自己元素用于旋转
  • 父级元素通常需要景深属性，表示观众距离场景的距离

单位：px

1
perspetive: ;
如果既为舞台又为演员
1
transform-style: preserve-3d;

3D旋转

单位：deg

1
transform: ;

取值

rotateX(x)：以x轴为中心轴旋转
rotateY(y)：以y轴为中心轴旋转
rotateZ(z)：以z轴为中心轴旋转
rotate3D(x, y, z, n)：

x、y、z取值为0：该轴不参与旋转
x、y、z取值大于0：都参与旋转，但是旋转速度不同

3D平移

单位：px

1
transform: ;

取值

translateX(x)：x轴方向的平移，正数向右，负数向左
translateY(y)：y轴方向的平移，正数向下，复数向上
translateZ(z)：z轴方向的平移，正数放大，负数缩小

过渡

  • 让css的值，在一段时间内，平缓变化的效果（2个值之间的变化）
  • 一定要有事件触发
  • 一定要发生变化

过渡的属性

1
transition-property: ;

取值

执行过渡样式属性（background），多个属性用空格分开
all：所有支持过渡的属性，都执行过渡

支持过渡的css属性

颜色属性
大多数取值为具体数字的属性
阴影
转换
visibility：可视化

过渡的总时间

  • 整个过渡效果持续的时间

单位：s、ms

1
transition-duration: ;

过渡的速率

1
transition-timing-function: ;

取值

ease：慢开，加速，慢关（缺省值）
linear：匀速（常用）
ease-in：慢速开始
ease-out：慢速结束
ease-in-out：慢开，先加速，后减速，慢关
cubic-bezier()：贝塞尔曲线

过渡的延迟时间

单位：s、ms

1
transition-delay: ;

过渡代码编写位置

  • 写在原来的选择器中，过渡效果有去有回
  • 写在hover中，过渡效果有去无回

简写

1
2
3
transition: property duration timing-function delay;

transition: duration;

多个过渡（不建议）

1
2
transition: property duration timing-function delay,
            property duration timing-function delay;

多个过渡

1
transition: all duration timing-function delay;

动画

  • 多个过渡效果放一起，可以使用伪类激发

创建动画

通过关键帧

关键帧

  • 控制动画的每一个状态
  • 动画执行的时间点
  • 在这个时间点上的样式
1
2
3
4
5
@keyframes 动画名称 {
    0% {css样式}
    ...
    100% {css样式}
}

通过起止状态

1
2
3
4
@keyframes 动画名称 {
    from {起始状态css样式}
    to {截止状态css样式}
}

调用动画

设置调用的动画的名称

1
animation-name: ;

设置动画的执行时间

单位：s、ms

1
animation-duration: ;

设置动画的时间曲线函数

1
animation-timing-function: ;

取值：ease/linear/ease-in/ease-out/ease-in-out

设置延迟

  • 只能设置第一次动画的延迟

单位：s、ms

1
animation-delay: ;

设置执行次数

1
animation-iteration-count: ;

取值

数字：指定次数
infinite：无限次

动画的播放顺序

  • 设置动画是否反向执行
1
animation-direction: ;

取值

noermal：0%100%
reverse：100%0%
alternate：轮流播放，奇数次正着播放，偶数次反着播放

填充方式

1
animation-fill-mode: ;

取值

backwards：延迟时间内，填充动画的第一帧
forwards：动画播放完毕后，填充动画的最后一帧

暂停和播放

1
animation-play-state: ;

取值

paused：暂停
running：播放

简写方式

1
2
3
animation: name duration timing-function delay count;
animation: name duration timing-function delay count direction fill-mode;
animation: name;

动画的兼容性问题

  • 如果需要兼容低版本浏览器，需要在动画声明的时候加前缀
1
2
3
4
5
@keyframes 动画名称 {}
@-webkit-keyframes 动画名称 {}
@-ms-keyframes 动画名称 {}
@-moz-keyframes 动画名称 {}
@-o-keyframes 动画名称 {}

完成

参考文献

哔哩哔哩——web前端小清风