CSS基础总结

CSS基础总结

开发工具与关键技术：IDEA  CSS样式表
作者：刘铭聪
撰写时间：2021年6月29日  

CSS基础总结
一、引入CSS样式表
内联样式：
直接将样式定义到HTML元素中(写在标签里)。这种作用范围有限，只影响它所在的标签，而且总是覆盖嵌入样式和链接样式。
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”>内容</标签名>
内部样式：
写在

外联样式：
写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。只要使用标把样式表链接到页面，相应页面就可以使用样式。

CSS(英文全称：Cascading Style Sheets 层叠样式表)
CSS的发展史：
CSS1.0:1996年12月，CSS1.0作为第一个正式规范面世，其中加入了字体、颜色等相关属性。
CSS2.0:1998年5月，CSS2.0规范正式推出。这个版本的CSS是最广为人知的一个版本，以前的开发者使用的一般的就是这个版本的CSS规范。
CSS2.1:2004年2月，CSS2.1对原来的2.0进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。CSS2.1可认为是CSS2.0的修订版。
CSS3.0:2010年，CSS3规范推出，这个版本的CSS完善了前面CSS存在的一些不足。例如：颜色模块增加了色彩校正、透明度等功能；字体模块则增加了文字效果、服务器字体支持等；还增加了变形和动画模块等。

CSS代码

二、CSS选择器
1、CSS样式的语法格式：
元素选择器(元素选择器是最简单的选择器)
选择器 属性:值
根据这个结构我们可以扩展：
例如：p{color:red;font-size:14pt;font-weight:bold;}
h1,p,a{color:blue;font-size:14pt;}组合元素选择器
2、所有用于选择特定元素的选择器分三种：
上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素ID和类选择器：基于id和class的属性值进行选择元素。
属性选择器：基于属性的有无和特征进行选择。

①上下文选择器：
上下文选择器的语法格式：标签1 标签2{属性:值;}
注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开，上下文选择器以空格隔开
②特殊的上下文选择器：
子选择器> :
语法格式:标签1>标签2 解释说明：标签1和标签2是父子关系。
紧邻同胞选择器+ :
语法格式:标签1+标签2 解释说明：标签2紧跟同胞标签1的后面。
一般同胞选择器~ :
语法格式:标签1~标签2 解释说明:CSS3新增的兄弟选择器，标签1、2是同胞即可，不一定紧挨着。
通用选择符*
解释说明:通用选择器*是一个通配符，匹配任何元素。
③id选择器和class选择器：
id选择器：
语法格式: #ID名称{属性:值}
class选择器：
语法格式: .Class名称{属性:值}
④属性选择器：
属性名选择器：
语法格式：标签名[属性名]
属性值选择器：
语法格式：标签名[属性名=“属性值”]

三、CSS伪类
伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。伪类分为两种：UI伪类和结构化伪类，还有伪元素和CSS3新增的伪类选择器
UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。:hover
结构化伪类：会在标记中存在某种结构上的关系时(例如：某元素是一组元素中的第一个或最后一个)，为该元素应用CSS样式。
伪元素：伪元素就是在你的文档中若有实无的元素(解释说明：在HTML代码中没有，我们可以通过css的样式设置伪元素，让它显示给我们看到)如：::before 和::after 伪元素
CSS3新增的伪类选择器：Selector1:not(Selector2) 匹配Selector1，但不匹配Selector2，相当于从Selector1中减去Selector2
Selector:target(target 目标)说明：如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标(target)
注意：一个冒号(:)表示伪类，两个冒号(::)表示伪元素。

四、层叠与继承
层叠：层叠是CSS的核心机制。层叠的工作机制：当元素的同一个样式属性有多种样式值的时候，CSS就是靠层叠机制来决定最终应用哪种样式。
层叠规则：
①层叠规则一：找到应用给每个元素和属性的声明。浏览器在加载每个页面时，都会据此查找到每条CSS规则，并标识出所有受到影响的HTML元素。
②层叠规则二：按照顺序和权重排序。
按顺序：浏览器依次检查CSS样式的来源，并设定匹配的属性，如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环。
权重排序：!important
③层叠规则三：按特指度排序。
计算特指度(ICE 公式)
I:id C :class E:element
1.选择器中有一个ID，就在I的位置上加1；
2.选择器中有一个类(class),就在C的位置上加1；
3.选择器中有一个元素(标签)名，就在E的位置上加1；
4.得到一个三位数。得到的这个数就是我们的特指度。I:id百位数，C :class 十位数，E:element个位数
元素选择器如：p 001特指度=1
元素选择器+class选择器如：p.largetext 011 特指度=11
元素选择器+id选择器如：p#largetext 101 特指度=101
两个元素选择器+class选择器如：body p.largetext 012 特指度=12
两个元素选择器+id选择器如：body p#largetext 102 特指度=102

④层叠规则四：顺序决定权重。如果两条规则都影响到某元素的同一属性，而它们的特指度也相同，则位置最靠下的胜出。

说明：规则一在特指度相同的情况下，按排列

继承：我们的CSS中很多的属性也是可以继承的，其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。当然还有一部分是不能继承的。例如：边框、内外边距。

五、字体和文本
字体相关属性：
color:该属性用于控制字体颜色，该属性值包括字符类型的颜色名、十六进制的颜色值、rgb(255,255,255)值。还有CSS3提供的HSL颜色值。
font-famliy:设置文字的字体。因为浏览器内嵌字体的支持，该属性可以设置多个显示字体，浏览器按该属性指定的多个字体依次搜索，以优先找到的字体来显示文字，多个属性值之间用逗号(,)隔开。
font-size:设置字体的大小。此处的字体大小分为相对字体大小和绝对字体大小。还可以使用关键字。例如：medium,samll,large,samller,larger等
绝对字体大小：使用像素(px),点(pt),皮卡(pc),英寸(in)来设置字体的大小，
它们是绝对单位，设置多大就是多少，不会受到祖先元素的字体大小影响。
相对字体大小：使用百分比(%),em或者rem,这些单位的值是相对的，该字体的大小要相对该元素最近的“被设定过字体大小”的祖先元素来确定，比绝对字体大小的设定要复杂点。
font-style:设置字体的风格。属性值有：normal(正常),italic(斜体),oblique(倾斜)。
font-weight:设置字体是否加粗。属性值：lighter,normal,bold,bolder.
font-variant:设置文字的大写字符的格式。属性值：normal,small-caps(小型的大写字母字体)
文本属性：
text-decoration:该属性用于控制文字是否有修饰线。属性值：none,underline(下划线),line-through(中划线),overline(上划线),blink(闪烁)
text-align:设置文本对齐。属性值：center,left,right,justify(两端对齐)。
text-shadow:该属性用于设置的文字是否有阴影效果。
color:指定该阴影的颜色。
xoffset:指定阴影在横向上的偏移。
yoffset:指定阴影在纵向上的偏移。
radius：A指定阴影的模糊半径。模糊半径越大，阴影看上去越模糊。
多重阴影：多加几组数据即可。
sytle=“text-shadow:5px 5px 2px #cf0”
line-height:设置文字的行高，即字体最低端与字体内部顶端之间的距离。负值的行高可以实现阴影效果。
text-transform:设置文字的大小写。属性值：none,capitalize(首字母大写),uppercase(全部大写),low ercase(全部小写)
letter-spacing:设置字符之间的间隔。
word-spacing:设置单词之间的间隔。

六、盒模型
盒模型：所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。可见的板式模型主要由三个属性控制：position属性、display属性和float属性。
position属性控制页面上元素间的位置关系。
display属性控制元素是堆叠、并排或者不在页面上显示。
float属性提供控制的方法，以便于把元素组成成多栏布局。
盒模型讲解：在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。所以我们不能直接的看到页面中的盒子结构。我们先从每个元素的属性开始，这些属性分为3组：
1、边框(border):可以设置边框的宽度、样式、颜色。
2、内边距(padding):可以设置盒子内容区(content)和边框的间距。
3、外边距(margin):可以设置盒子和邻元素的间距。
解释：内容(content)就是盒子里装的东西。
内边距(padding)怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料。
边框(border)就是盒子的本身。
外边距(margin)就是两个盒子之间的距离。
一个盒子有4条边，因此与边框、内边距、外边距相关联的属性也各有4个，分别是上(top)右(right)下(bottom)左(left)
border-top,border-right,border-bottom,border-left
padding-top,padding-right,padding-bottom,padding-left
margin-top,margin-right,margin-bottom,margin-left
边框的3个相关属性：
宽度(border-width):可以使用thin,medium,thick等文本值，也可以使用除百分比和负数之外的任何绝对值。
样式(border-style):有none(无边框),hidden(隐藏边框),dotted(点线边框),
dashed(虚线边框),solid(实线边框),double(双线边框),groove(3D凹槽边框),ridge(3D凸槽边框),inset(3D凹入边框),outset(3D凸出边框)等文本值。
颜色(border-color):可以使用任何颜色值，包括RGB,HSL,十六进制颜色值和颜色相关的关键字。
CSS3提供的圆角边框：border-radius：该属性用于指定圆角边框的圆角半径。
border-top-left-radius:该属性用于指定左上角的圆角半径。
border-top-right-radius:该属性用于指定右上角的圆角半径。
border-bottom-left-radius:该属性用于指定左下角的圆角半径。
border-bottom-right-radius:该属性用于指定右下角的圆角半径。
CSS3新增的box-shadow属性为盒模型添加阴影，该属性可用于整个盒模型添加阴影。
box-shadow:是一个复合属性。它含有以下5个属性值。
hOffset:该属性值控制阴影在水平方向的偏移。
vOffset:该属性值控制阴影在垂直方向的偏移
blurLength:该属性值控制阴影的模糊程度。
scaleLength:该属性值控制阴影的缩放程度。
color:该属性值控制阴影的颜色。

七、背景
背景：背景支持为元素添加背景颜色和背景图片，接下里介绍背景相关的属性。
background-color:背景颜色。
background-image:用于设置背景图片。注意：如果同时设置背景颜色(background-color)和背景图片(background-image)，背景颜色会被背景图片覆盖。该属性需要使用url()函数指定图片地址，图片的地址既可以是相对的，也可以是绝对的。
background-repeat:用于设置对象的背景图片是否平铺(重复显示)。在指定该属性之前，必须先指定背景图片(background-image)该属性有repeat(纵横同时重复),no-repeat(不重复),repeat-x(x轴方向重复),repeat-y(y轴方向重复) 4个值。
background-position:用于控制背景图片的位置。background-position有5个关键字值分别是：top,left,bottom,right,center。可以通过任意两个关键字组合来定位。也可以通过百分比来定位。例如：background-position:50% 50%.第一个百分比对应横坐标，第二个百分比对应纵坐标。
background-attachment:设置背景图片是随对象内容滚动还是固定。在指定该属性之前，必须先指定背景图片。该属性的两个值：scroll(默认),fixed(固定)。
background:这是一个复合属性，可以同时设置背景颜色、背景图片、背景重复、背景位置等。
CSS3还可以给元素背景添加多个背景图片。

八、浮动与定位
浮动：浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后，
原来紧跟其后的元素就会在空间允许的情况下，向上提升到浮动元素平起平坐。
如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。
浮动(float)的三个属性值：left(左浮动),right(右浮动),none
clear（清除浮动）的三个属性值：left（清除左侧浮动）,right（清除右侧浮动）,both
定位：盒模型，提到了3个属性可以用来控制页面排版。
三大属性：position属性，display属性，float属性。
①position 属性控制页面上元素间的位置关系。
②display 属性控制页面元素是否显示或者是堆叠还是并排显示。
③float 属性提供控制方法。通过float这种控制方法，可以实现多栏布局，导航菜单等等。
position属性是干嘛用的？怎么用？有哪些属性值？
①position属性控制页面上元素间的位置关系，也就是排版。
②怎么用？要知道怎么用就要先了解position的属性值。
③属性值：static（默认状态）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。
⑴static：页面元素默认的定位。
⑵relative：relative相对定位，相对于自己现在的位置（默认的位置）进行定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。（效果看案例）
⑶absolute：absolute绝对定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。（效果看案例）。
想一想，我们的absolute绝对定位，它的定位点在哪里？
定位点：浏览器的左上角。能不能改变它的定位点？
答案是肯定的。
怎么改变？这里就要用到前面我们学到的relative相对定位了。用relative和absolute配合使用就能改变我们的定位点。
⑷fixed：fixed固定定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。

九、CSS3中的变形与动画
CSS3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。比transition动画功能更强大的是animation动画，animation动画同样可以和位移、旋转、缩放、倾斜这4种几何变换结合，但它可以指定多个关键帧，从而允许定义更加丰富的自定义动画。
CSS3动画----transform变形
transform：该属性用于设置变形，该属性支持一个或多个变形函数。
rotate(angle):该函数用于设置元素旋转的度数。例如：transform：rotate(30deg); 旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转
skew(sx,yx):该函数用于设置元素的一个扭曲效果。例如：transform:skew(10deg,20deg); 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。
Skew()具有三种情况：
1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
scale(sx,xy):该函数用于设置元素的缩放效果。缩放 scale()函数让元素根据中心原点对对象进行缩放。
缩放 scale 具有三种情况：
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
2、scaleX(x)元素仅水平方向缩放（X轴缩放）
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
translate(tx,ty):该函数用于设置元素的位移。translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
translate我们分为三种情况：
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2、translateX(x)仅水平方向移动（X轴移动）
3、translateY(Y)仅垂直方向移动（Y轴移动）
matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。前面的4个参数将组成变形矩阵,后面的dx,dy主要是指在坐标轴上的一个偏移量。matrix() 是一个含六个值的(m11,m12,m21,m22,dx,dy)变换矩阵，用来指定一个2D变换，相当于直接应用一个[m11 m12 m21 m22 dx dy]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。
变形–原点 transform-origin:任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
CSS3动画---- transition动画
动画–过渡属性 transition-property
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
transition-property属性：
transition-property指定对THML元素的哪个css属性进行平滑渐变处理，该属性可以指定
例如background-color,width,height等各种标准的CSS属性。
特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性。
用一个简单的例子来说明这个问题：假设你的初始状态设置了样式“width”,“height”,“background”,当你在最终状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。
动画–过渡所需时间 transition-duration
transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
动画–过渡函数 transition-timing-function
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：
ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。
linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。
ease-in:动画开始的速度较慢，然后速度加快。
ease-out:动画开始的速度很快，然后速度减慢。
ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.
动画–过渡延迟时间 transition-delay
transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。
CSS3动画---- Animation动画
css3为Animation动画提供的几个属性如下：
animation-name:指定动画名称，该属性指定一个已有的关键帧定义。animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。属性值：none:默认值。当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。“@keyframes”定义的动画名称。
animation-duration:指定动画持续时间。animation-duration设置动画播放时间animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒
animation-timing-funtion:指定动画变化速度。animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。
ease:默认值，动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度。
linear:线性速度。动画开始时的速度和结束时的速度一样（匀速）。
ease-in:动画开始的速度较慢，然后速度加快。
ease-out:动画开始的速度很快，然后速度减慢。
ease-in-out:动画开始时比较慢，然后加快速度，达到最大速度后再减慢速度.
animation-delay：指定动画延迟多长时间才开始执行。
animation-iteration-count：指定动画的循环执行次数。animation-iteration-count属性主要用来定义动画的播放次数。其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。如果取值为infinite，动画将会无限次的播放。
animation-direction：animation-direction属性主要用来设置动画播放方向.
其主要有两个值：normal、alternate
normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，
第奇数次向反方向播放。例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为：animation-direction:alternate
animation-play-state：animation-play-state属性主要用来控制元素动画的播放状态。
参数：其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
animation-fill-mode：animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。
主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：
none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards:表示动画在结束后继续应用最后的关键帧的位置
backwards:会在向元素应用动画样式时迅速应用动画的初始帧
both:元素动画同时具有forwards和backwards效果
在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
animation:这是一个复合属性。该属性的格式为：animation:animation-name,animation-duration,animation-timing-funciotn,animation-delay,animation-iteration-count.
keyframes(关键帧)：计算机动画术语， 帧——就是动画中最小单位的单幅影像画面，
相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。
关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。
关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。
Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

CSS3动画函数