【笔记】CSS学习笔记

发表于 2019-12-30 更新于 2024-09-07 分类于前端学习指北阅读次数：

前言

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

语法规则

1
2
3

选择器 {
  样式声明;
}

使用的方式

内联样式（行内样式）

写在HTML标签内

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

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

内部样式

在<style></style>标签内写样式
<style></style>标签写在<head></head>标签内

<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	元素名称 {样式声明}

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元素

只可以给双标签添加伪元素
必须有content属性
必须脱离文档标准流

伪元素的content属性是设置文字内容，默认可以传空字符串
伪元素在同一个标签内部只可以有两个（每种一个），如果超出两个，后者覆盖前者

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

1
2
3

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

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

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

1
2
3

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

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

尺寸

设置元素的宽度和高度

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：透明

单边设置

border-top: ;
border-right: ;
border-bottom: ;
border-left: ;

单属性设置

1
2
3

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

单边单属性设置

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

外边距

margin: ;

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

取值 > 以px为单位的数字 > 以%为单位的数字，父元素的百分比 > 负数 > > auto > > 必须左右外边距一起用 > > 块级元素本身水平居中 > > 上下外边距auto无效

外边距的简写方式

margin: 上下左右;

margin: 上下 左右;

margin: 上 左右 下;

margin: 上 右 下 左;

自带内外边距的元素

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

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

* {
    margin: 0;
    padding: 0;
}

内边距

padding: ;

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

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

内边距的简写方式

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;

文本属性

字体颜色

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

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

设置边框

只会设置最外层的最大边框

table: ;

td/th

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

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

1	vertical-align: ;

取值 > top > middle > bottom

表格特有属性

边框合并

1	border-collapse: ;

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

设置边框间距

必须保证是边框分离状态

1	border-spacing: ;

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

设置表格的显示规则

用来设置浏览器渲染表格的方式

1	table-layout: ;

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

定位

设置元素在页面上的位置

分类

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

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

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

浮动定位

让块级元素横向显示的时候，使用浮动定位

float: ;

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

浮动的特点

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

清除浮动效果

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

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

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;

动画

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

创建动画

通过关键帧

关键帧

控制动画的每一个状态
动画执行的时间点
在这个时间点上的样式

@keyframes 动画名称 {
    0% {css样式}
    ...
    100% {css样式}
}

通过起止状态

@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;

动画的兼容性问题

如果需要兼容低版本浏览器，需要在动画声明的时候加前缀

@keyframes 动画名称 {}
@-webkit-keyframes 动画名称 {}
@-ms-keyframes 动画名称 {}
@-moz-keyframes 动画名称 {}
@-o-keyframes 动画名称 {}

完成

参考文献

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