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动画函数