CSS笔记

置顶聪明橘子皮

已于 2024-09-05 11:38:05 修改

阅读量854

点赞数 17

文章标签： css 学习前端

于 2024-08-04 17:02:40 首次发布

本文链接：https://blog.csdn.net/zzzzzaliya/article/details/140906734

版权

css初识和基本选择器

属性名与属性值成对出现→键值对

css引入方式

1.内部样式表写在style标签里

2.外部样式表（开发使用）写在 .css 文件中，link引入

3.行内样式表（配合JS使用）写在标签的style属性值里

标签选择器

1.标签选择器无法差异化同名标签样式

2.类选择器

1 定义类选择器→ .类名 2 使用→ 标签添加 class="类名"

一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开。

3.id选择器一般配合JS使用，很少设置样式

1 定义id名→ #id名 2 使用→标签添加 id="id名"

同一个id选择器在一个页面只能用一次。

4.通配符选择器查找页面所有标签，设置相同样式。*

一般在开发初期用于清除标签默认样式。

文字控制属性

文字控制属性有继承性。

font字体

描述	属性	属性值
字体大小	font-size	文字尺寸，常用单位px
字体粗细	font-weight	正常： 700 / normal 加粗： 400 / bold
字体倾斜	font-style	作用：一般用来清除文字默认的倾斜效果正常：normal 倾斜：italic
行高	line-height	数字 + px 数字（当前标签字体大小的倍数）垂直居中技巧：行高属性值等于盒子高度属性值（只能是单行文字）
字体族	font-family	`font-family:tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;`
字体复合属性	font	使用场景：设置网页文字公共样式。 font:是否倾斜是否加粗字号/行高字体（必须按顺序）字号和字体值必须书写，否则font属性不生效。

行高测量方法：从一行文字的最顶（最底）测量到下一行文字的最顶（最底）。

文本样式

1.文本缩进

属性名：text-indent

属性值：

数字 + px
数字 + em (推荐：1em = 当前标签的字号大小)

2.文本对齐方式

属性名：text-align

属性值：

属性值	效果
left	左对齐（默认）
center	居中对齐
right	右对齐

本质：居中的是内容，不是标签，属性要设置给内容的父级。

3.文本修饰线

属性名：text-decoration

属性值：

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线

通常用于去掉a标签的下划线。

4.文字颜色

属性名：color

属性值：

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词		学习测试
rgb表示法	rgb(r,g,b)	表示红黄蓝三原色，取值：0-255
rgba表示法	rgba(r,g,b,a)	a表示透明度，取值：0-1（取值越小余越透明）	开发使用，实现透明色
十六进制表示法	#RRGGBB	取值：0-9，a-f 可简写：#ffcc00→#fc0	开发使用，从设计稿复制

复合选择器

定义：由两个或多个基础选择器，通过不同方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

1.后代选择器

选中某元素的后代元素（选中所有级别的后代）。

写法：父选择器子选择器 {CSS属性}，父子选择器之间空格隔开。

2.子代选择器

选中某元素的子代元素（最近的子级）。

写法：父选择器 > 子选择器 {CSS属性}。

3.并集选择器

选中多组标签设置相同样式。

写法：逗号隔开各个选择器

4.交集选择器（了解）

选中同时满足多个条件的元素。

写法：选择器之间连写，没有如何符号，如果交集选择器中有标签选择器，标签选择器写在最前面。

<title>交集选择器</title>
  <style>
    /* 第一个p标签文字颜色是红色 （既是p标签，又有box类）*/
    p.box {
      color: red;
    }
  </style>
</head>
<body>
  <p class="box">p标签，且使用了类选择器box</p>
  <p>p标签</p>
  <div class="box">div标签，且使用了类选择器box</div>
</body>

5.伪类选择器

伪类表示元素状态，选中元素的某个状态（如鼠标悬停）设置样式。

鼠标悬停状态：选择器:hover {CSS属性}

超链接伪类——四个状态

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时（激活）

如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。

CSS三大特性

1.继承性

子级默认继承父级的文字控制属性。

工作中，一般将文字控制属性设置给body标签，保证网页文字效果统一。如果标签本身有样式则生效自己的样式，不继承。

2.层叠性

相同的属性会覆盖，不同的属性会叠加。

3.优先级

优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配机制。

规则：选择器优先级高的样式生效。

公式：通配符选择<标签选择器<类选择器<id选择器<行内样式<!important

(选中标签的范围越大，优先级越低)

!important有提权功能，将选择器的优先级提到最高，慎用

* {
  color: red !important;
}

权重叠加计算规则

如果时复合选择器，则需要权重叠加计算。

公式：（每一级之间不存在进位）

行内样式， id选择器个数，类选择器个数，标签选择器个数

规则：

从左向右依次比较选择器个数，同一级个数多的优先级高，如果个数相同，则想后比较
!important权重最高
继承权重最低

Emmet写法

HTML

说明	标签结构	Emmet
类选择器	<h1 class="top"></h1> <div class="box"></div>	标签名.类名 h1.top div标签直接 .box
id选择器	<div id="box"></div>	标签名#id名 div#box
同级标签	<div></div> <p></p>	div+p
父子级标签	<div> <p></p> </div>	div>p
多个相同标签	<span></span><span></span><span></span>	span*3
有内容的标签	<div>内容</div>	div{内容}

CSS：大多数简写方式为属性单词的首字母。

CSS背景及属性

背景属性：

描述	属性	属性值
背景色	background-color
背景图	background-image	url(背景图URL)
背景图平铺方式	background-repeat	no-repeat 不平铺 repeat 平铺（默认效果） repeat-x 水平方向平铺 repeat-y 垂直方向平铺
背景图位置	background-position	·关键字：left, right, center, top, bottom ·坐标（数字+px，正负都可)：正数向右、向下，负数向左、向上可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中
背景图缩放	background-size	·关键字： cover：等比例缩放图片以完全覆盖背景区，可能背景图片部分看不见； contain：等比例缩放背景图以完全装入背景区，可能背景区部分空白。 ·百分比：根据盒子尺寸计算图片大小 100% 图片的宽度跟盒子宽度一样，图片高度按照图片比例等比缩放。 ·数字+单位
背景图固定	background-attachment	fixed（作用:背景不会随着元素的内容滚动）
背景复合属性	background	背景色背景图平铺方式位置/缩放固定（空格隔开各个属性值，不区分顺序。）

元素显示模式及转换

显示模式：标签（元素）的显示方式。

作用：布局网页时，根据标签的显示模式选择合适的标签拜访内容。

块级元素(如div)

独占一行；默认宽度是父级的100%；添加宽高属性生效

行内元素(如span)

一行共存多个；尺寸由内容撑开；加宽高不生效

行内块元素（如图片img）

一行共存多个；默认尺寸由内容撑开；加宽高生效

转换显示模式

属性名：display

属性值：

属性值	效果
block	块级
inline-block	行内块
inline	行内

伪类和伪元素

结构伪类选择器

作用：根据元素的结构关系查找元素。

写法：

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（从1开始）

:nth-child(公式)写法：

功能	公式
偶数标签	2n
奇数标签	2n+1;2n-1
找到x的倍数的标签	xn
找到第x个以后的标签	n+x（n从0开始）
找到第x个以前的标签	-n+x（n从0开始）

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

两个：，一个：也可以，但习惯写两个：

注意点：

必须设置content:" "属性，用来设置伪元素的内容，否则伪元素选择器不生效，如果没有内容，引号留空即可。
伪元素默认是行内显示模式。
权重和标签选择器相同。

盒子模型

组成：

内容区域 - width & height

内边距 - padding （出现在内容与盒子边缘之间）

边框线 - border

外边距 - margin （出现在盒子外面）

边框线

属性名：border（bd）

属性值：边框线粗细线条样式颜色（不区分顺序）

常用线条样式：

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

单方向边框线：

属性名：border-方位名词

属性值：边框线粗细线条样式颜色（不区分顺序）

内边距

属性名：padding / padding-方位名词

多值写法：

四值：上右下左

三值：上左右下

两值：上下左右

从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样。

尺寸计算：

默认情况：盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸

给盒子加border / padding会撑大盒子

解决：手动做减法，减掉border / padding的尺寸

内减模式：属性名：box-sizing 属性值：border-box

外边距及合并塌陷问题

作用：拉开两个盒子之间的距离

属性名：margin

与padding属性值写法、含义相同

外边距合并现象：

场景：垂直排列的兄弟元素，上下margin会合并

现象：取两个margin中的较大值生效

外边距塌陷问题：

场景：父子级的标签，子级的添加上边距会产生塌陷问题

现象：导致父级一起向下移动

解决方法：

父级设置padding；

父级设置overflow：hidden

父级设置border-top

应用

版心居中效果：margin：0 auto；（盒子必须要有宽度，否则无法实现）

清除默认样式：

清除默认内外边距：用通配符选择器设置内外边距为0

清除列表默认样式：list-style 属性取值为none

* {
  margin:0
  padding:0
}

li {
  list-style: none;
}

清除列表默认样式：list-style 属性取值为none

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值：

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

行内元素 - 内外边距问题

场景：行内元素添加margin和padding，无法改变元素垂直位置

解决方法：给行内元素添加行高属性 line-height 可以改变垂直位置

圆角与阴影

圆角

属性名：border-radius

属性值：数字+px / 百分比（属性值时圆角半径）

从左上角顺时针赋值，没有取值的角与对角取值相同。

常见应用：

正圆形状

给正方形盒子设置圆角属性值为宽高的一半 / 50%

胶囊形状

给长方形盒子设置圆角属性值为盒子高度的一半

阴影

属性值：box-shadow

属性值：X轴偏移量 Y轴偏移量模糊半径扩散半径颜色内外阴影

注意：X轴偏移量和Y轴偏移量必须书写

默认是外阴影，内阴影需要添加 inset

布局

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则。如：块元素独占一行，行内元素一行显示多个。

浮动（了解）& 清除浮动

作用：让块元素水平排列。

属性名：float

属性值：

left：左对齐
right：右对齐

加了浮动之后的盒子特点：顶对齐；具备行内块的显示模式；会脱标，脱离标准流的控制，不再占用标准流的位置。

浮动本质是实现图文混排效果。

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

1、额外标签法

在父元素内容的最后添加一个块级元素，设置CSS属性 clear: both(属性值也可以写left / right)。

2、单伪元素法

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

3、双伪元素法（常用）

/*before 解决外边距塌陷问题 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/*after清除浮动 */
.clearfix::after {
  clear: both;
}

跟清除默认样式的代码放在一起，用的时候直接调用

4、overflow法

父元素添加CSS属性 overflow: hidden

flex布局

flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

flex模型不会产生浮动布局中的脱标现象，布局网页更简单、更灵活。

描述	属性
创建flex容器	display: flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式（对单行弹性盒子不生效）	align-content

组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸。

组成部分：

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴/交叉轴：默认在垂直方向

主轴对齐方式

属性名：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

视觉效果：弹性盒子之间的间距是两端间距的2倍。

侧轴对齐方式

属性名：

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器，弹性盒子在侧轴没有尺寸才能拉伸（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

修改主轴方向

属性名：flex-direction

属性值：

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

弹性伸缩比

作用：控制弹性盒子在主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

默认情况下（没有设置弹性盒子宽高），主轴方向尺寸靠内容撑开，侧轴默认拉伸。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值：

wrap 换行
nowrap 不换行（默认）

行对齐方式

对单行弹性盒子不生效

属性名：align-content

属性值：(与主轴对齐方式的属性值一样)

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

定位

灵活地改变盒子在网页中的位置

实现：

1.定位模式：position

2.边偏移属性：设置盒子的位置（left right top bottom）

相对定位

position:relative

特点：

1.改变位置的参照物是自己原来的位置；

2.不脱标，占位，原来的位置不会被占用；

3.相对定位之后标签显示模式的特点不变。

    div {
      position: relative;
      top: 100px;
    }
    /* 相比原来的位置向下移动了100px */

绝对定位

position:absolute

使用场景：子绝父相——子级绝对定位，父级相对定位（子级的定位无论怎么改变在父级的里面）

特点：

1.脱标，不占位

2.参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，则参照浏览器窗口改位置

3.绝对定位的盒子显示模式特点改变：宽高生效（具备行内块的特点）

定位居中效果

实现步骤：

1.在浏览器窗口居中（绝对定位）；在父级盒子里居中（子绝父相）

2.水平、垂直边偏移为50%

3、子级向左、上移动自身尺寸的一半

方法一：设置左、上的外边距为负的尺寸的一半
方法二：transform:translate(-50%, -50%)

固定定位

position：fixed

场景：元素的位置在网页滚动时不会改变

特点：

1.脱标，不占位

2.参照物是浏览器窗口

3.显示模式特点改变：宽高生效（具备行内块的特点）

堆叠层级 z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：取值是整数，默认是0，取值越大显示顺序越靠上。

总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	行内块特点	1.已经定位的祖先元素 2.浏览器窗口
固定定位	fixed	是	行内块特点	浏览器窗口

精灵图和字体图标

CSS精灵

CSS精灵，也叫CSS Sprites，是一种网页图片的应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。

优点：减少服务器被请求的次数，减轻服务器的压力，提高页面加载速度

实现步骤：

1.创建盒子，盒子尺寸与小图尺寸相同

2.设置盒子背景图为精灵图

3.添加 background-position 属性，改变背景图位置

3.1使用PxCook测量小图片左上角坐标

3.2取负数坐标为 background-position 属性值（向左上移动图片位置）

字体图标

展示的是图标，本质是字体

作用：在网页中添加简单的、颜色统一的小图标

优点：

灵活性：灵活的修改样式
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载再使用

下载字体

iconfont 图标库：https://www.iconfont.cn/
下载字体

使用字体

1.引入字体样式表（iconfont.css）

<link rel="stylesheet" href="./iconfont/iconfont.css">

2.标签使用字体图标类名

iconfont：字体图标基本样式（字体名，字体大小等）
icon-xxx：图标对应的类名

<span class="iconfont icon-shouji"></span>

CSS修饰属性

垂直对齐方式 vertical-align

为什么图片和文字一上一下？

因为浏览器会把行内块、行内标签都当作文字处理，在浏览器里，所有的文字默认都按基线对齐，所以图片下方会有一段间距。

解决：

1.给图片加vertical-align属性

2.将图片转成块级

属性名：vertical-align

属性值：

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

过度transition

作用：可以为一个元素在不同状态(通常指标签默认状态和鼠标悬停状态)之间切换的时候添加过渡效果。

属性名：transition（复合属性——有多个属性值，且用空格隔开）

属性值：过渡的属性花费时间(s)

两种写法：

1.过渡的属性可以是具体的CSS属性（）

2.也可以为all（两个状态属性值不同的所有属性，都产生过度效果）

transition 设置给元素本身，不是加给过渡后的状态。

  img {
    width: 200px;
    height: 150px;
    transition: all 3s;
  }

  img:hover {
    width: 500px;
    height: 400px;
  }

透明度opacity

作用：设置整个元素的透明度（包含内容和背景）

属性值：0 - 1之间的数（0-完全透明，1-不透明）

如果只让背景色透明，那就设置background-color属性值rgba写法。

光标类型 cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

CSS3高级特效

平面转换 transform

作用：给元素添加动态效果，一般与过渡配合使用。

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）。

平面转换又叫2D转换

平移

属性：transform: translate(X轴移动距离，Y轴移动距离)；

取值：

像素单位数值
百分比（参照盒子自身尺寸计算结果）
正负均可

技巧：translate() 只写一个值，表示沿着 X 轴移动；单独设置X 或 Y移动距离：translateX() 或 translateY().

旋转

属性：translate：rotate(旋转角度) 角度单位是deg。

技巧：取值为正负皆可，正—顺时针旋转，负—逆时针旋转。

改变转换原点

默认情况下，转换原点时盒子中心点。

属性：transform-origin：水平原点位置垂直原点位置；

取值：

方位名词（left、right、top、bottom、center）
像素单位数值
百分比

多重转换

先平移再转换

transform：translate() rotate()；

旋转会改变坐标轴向；多重转换以第一种转换形态的坐标轴为准。

想要边走边转，不能拆开写，只能写transform复合属性，因为相同属性会有层叠性。

缩放

沿中心点向四周缩放。

属性：

transform：scale(缩放倍数)；

transform：scale(X轴缩放倍数，Y轴缩放倍数)；

通常，只为scale设置一个值，表示X轴和Y轴等比例缩放。

倾斜

属性：transform：skew()；

取值：角度度数 deg、

渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景。如果图片颜色较浅，上面放的是白色文字，为了让文字突出，加渐变背景。

分类：

线性渐变（以直线的方向来填充渐变色）
径向渐变（以圆心为中心，沿半径向外渐变）

线性渐变

属性：

bgckground-image: linear-gradient (

渐变方向，

颜色1 终点位置，

颜色2 终点位置，

......

)；

取值：

渐变方向（可不写）：to 方位名词 / 角度度数
终点位置（可不写）：百分比

径向渐变

作用：给按钮添加高光效果

属性值：

bgckground-image: radial-gradient (

半径 at 圆心位置，

颜色1 终点位置，

颜色2 终点位置，

......

)；

取值：

半径可以是两条，则为椭圆
圆心位置取值：像素单位数值 / 百分比 / 方位名词（水平垂直两个方位）

空间转换

空间：从坐标轴角度定义的X、Y、Z三条坐标轴构成了一个立体空间，Z轴位置与视线方向相同。

空间转换也叫3D转换。

属性：transform

平移

属性：

transform: translate3d(x, y, z); #必须逗号隔开三个数

transform: translateX();

transform: translateY();

transform: translateZ();

取值：

像素单位数值
百分比（参照盒子自身尺寸计算结果）
正负均可

电脑是平面，默认状态下无法观察到Z轴平移效果。

视距属性 perspective

作用：指定了观察者与 z=0 平面的距离，为元素添加透视效果。

透视效果：近大远小、近实远虚

属性：添加给直接父级，取值范围 800-1200（单位px）

perspective：视距；

旋转

transform：rotateZ(值)；

沿Z轴旋转与平面旋转效果一样，因为Z轴的位置与盒子中心点重叠。

transform：rotateX(值)；

值取正，图片效果向后倒；值取负，图片效果向前倾（给父级添加perspective视距属性）。

transform：rotateZ(值)；

值取正，图片效果向右转；值取负，图片效果向左转（给父级添加perspective视距属性）。

左手法则

根据选择方向确定取值正负。

左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向。

rotate3d

rotate3d(x, y, z 角度度数)：用来自定义旋转轴位置及旋转角度

x, y, z 取值为 0-1 之间的数字

立体呈现 transform-style

作用：设置元素的子元素是位于3D空间还是平面中

属性名：transform-style

属性值：

flat（默认值）：子级处在平面中
preserve-3d：子级处于3D空间

呈现立体图形步骤：

1. 父元素添加 transform-style: preserve-3d;

2. 子级定位

3. 调整子盒子的位置（位移或旋转）

注意：立方体每个面都有独立的坐标轴，互不影响；每个面的坐标轴也跟着面旋转。

缩放

属性：

transform：scale3d(x,y,z)；

transform：scaleX()；

transform：scaleY()；

transform：scaleZ()；

动画 animation

CSS3（三）Animation 入门详解_css animation-CSDN博客

过渡：只能实现两个状态间的变化过程，一般配合hover状态使用

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

实现步骤

1.定义动画

写法一：只能设置两个状态的动画

@keyframes 动画名称 {

from {当前状态的CSS}

to {当前状态的CSS}

}

写法二：可以设置多个状态的动画（百分比表示的是动画时长的百分比）

@keyframes 动画名称 {

0% {}

10% {}

......

100% {}

}

2.使用动画

animation: 动画名称动画时长;

animation复合属性

animation: 动画名称动画花费时长速度曲线延迟时间重复次数动画方向执行完毕状态;

注意：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards为最后一帧状态 backwards为第一帧状态
animation-timing-function	速度曲线	steps(数字)为逐帧动画，工作中配合精灵图实现精灵动画 linear为匀速
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-paly-state	暂停动画	paused为暂停，通常配合:hover使用