前端-CSS
CSS全称为层叠款式表(Cascading Style Sheets),与HTML相辅相成,CSS担任完成网页的排版规划与款式美化,运用CSS款式发起在当前文件夹下建立一个CSS文件夹, 然后在CSS文件夹在建立.css文件, 在css文件中填写网页的款式。
款式特性
层叠性: 多组CSS款式合营作用于一个元素
继续性: 子女元素能够继续先人元素中的某些款式 例 : 大部份的文本属性都能够被继续
款式表的优先级: 优先级用来处置惩罚款式争执问题。同一个元素的同一个款式(比方文本性),在差别处所屡次举行设置,哪种款式表的优先级高选用哪种。
- 离元素近来的款式优先级最高(就近准绳)
- 文档内嵌与外链款式表,优先级一致,看代码誊写序次,后来者居上
- 浏览器默许款式和继续款式优先级较低
CSS款式分为行内款式(也称为内联款式),重要在单个页面中运用,另有就是内嵌款式以及外链款式。内嵌款式用的最多,外链款式重要用在项目当中,接下来我们细致相识一下。
款式表
插进去款式表的要领有三种:
- 行内款式
- 内嵌款式表
- 外链款式
行内款式
借助于HTML中style标签属性,为当前的标签元素增加款式声明,行内款式的style值由字符串包括CSS属性和值得键值对构成。
<标署名 style="属性:值;属性:值;"> <div style="background-color:red;color: white">容器</div>
内嵌款式
内嵌款式在单个网页中是用的比较多的。有了内嵌款式,我们就不须要在html标签中填写款式,那样会显得html代码浓厚,影响寓目浏览代码,而经由过程内嵌款式,在<head>标签中嵌入CSS款式代码。在<style>中经由过程CSS挑选器婚配到HTML代码中对应的标签元素。能够完成款式代码和HTML标签代码星散,让代码看起来越发雅观。
<style> 挑选器{ 属性:值; 属性:值; } </style>
外链款式
外部链接CSS款式,多用于大型的项目网站中,用外部链接CSS款式能够完成前后端星散。假如运用外部链接款式须要在当前文件夹中建立css文件夹,然后把后缀名为.css的款式文件放进去。末了在HTML文件中运用<link>标签引入外部款式表,外部款式文件中一样借助挑选器婚配元素运用款式
<link rel="stylesheet" href="CSS URL" type="text/css">
优先级:行内款式 > 内嵌款式 > 外链款式 > 浏览器默许款式
CSS 挑选器
经由过程元素名、类名、id名挑选到页面中拔取相应的元素标签,为其增加CSS款式
* 号挑选器
代表一切
/*去除一切标签元素的表里边框值*/ *{ margin:0; padding:0; }
标签挑选器
依据标署名婚配文档中一切该标签元素款式:
标署名{ 属性:值; } /*为一切p标签增加款式*/ p{ color: red; }
id挑选器
ID挑选器能够依据元素的 id 属性值婚配文档中唯一的标签元素,然后指定款式。
CSS 中 id 挑选器以 "#" 来定义。
#标签id名{ 属性:值; } /*比方*/ #div2{ color:red; }
注重 : 元素id具有唯一性,不能运用雷同的ID名;标签id名能够由数字,字母,下划线,- 构成,不能以数字开头; 只管见名知意,多个单词构成时,能够运用衔接符,下划线,小驼峰示意。
class挑选器/类挑选器
依据元素的class属性值婚配相应的元素,class 挑选器用于形貌一组元素的款式,class 挑选器有别于id挑选器,class能够在多个元素中运用,完成多个标签雷同款式的复用。
CSS 中 class 挑选器以 "." 来定义。
.元素class名{ 属性:值; } /*比方*/ .blue{ color:red; }
特别用法 :
- 类挑选器与其他挑选器连系运用时,标签在前, 类挑选器在后 例 : a.c1{ }
- class属性值能够写多个,合营运用类挑选器的款式 例 : .c1{ } .c2{ }
群组挑选器
为一组标签元素设置一致的款式,不必种别之间用逗号“,”分开。
挑选器1,挑选器2,挑选器3{
}
前提子女挑选器
前提子女挑选器:婚配在满足前提挑选器的状况下的一切子女元素(包括直接子元素和间接子元素),子女挑选器与父代挑选器用空格离隔。
/*婚配"挑选器1"中一切满足"挑选器2"的子女标签元素*/ 挑选器1 挑选器2{ }
子代挑选器
父代挑选器与子代挑选器用" > "号衔接,婚配满足挑选器的一切直接子代元素
父代挑选器>子代挑选器{
}
伪类挑选器
为元素的差别状况离别设置款式,伪类挑选器必需与基本挑选器连系运用
- :nth-child(n) 婚配属于其父元素的第 n 个子元素,不管元素的范例。
- p:first-child 婚配第一个p元素
- :link 超链接接见前的状况
- :visited 超链接接见后的状况
- :hover 鼠标滑过期的状况
- :active 鼠标点下去然则不抬起时的状况(激活)
- :focus 核心状况(文本框被编辑时就称为猎取核心)
- :after 在元素以后增加内容,合营content属性运用
/*第一个div元素*/ div:nth-child(1){ } /*超链接接见前的状况*/ a:link{ } /*超链接接见后的状况*/ a:visited{ } /*鼠标滑过期的状况*/ .c1:hover{ } /*每一个<p>元素以后插进去内容*/ p:after { content:"要增加的内容" }
注重 :
- 超链接假如须要为四种状况离别设置款式,必需根据以下序次誊写
:link /*接见前*/
:visited /*接见后*/
:hover /*鼠标滑过期*/
:active /*鼠标点下去然则不抬起来*/
属性挑选器
依据属性来挑选元素的挑选器。
挑选包括属性 title 的一切元素
[title] { color:blue; }
挑选包括属性 title="never" 的一切元素
[title=never] { border:5px solid green; }
挑选title属性值包括hello的一切元素,运用(~)分开属性和值:
[title~=hello] { color:blue; }
挑选器的优先级
运用挑选器为元素设置款式,发作款式争执时,重要看挑选器的权重,权重越大,优先级越高
挑选器 | 权重 |
---|---|
标签挑选器 | 1 |
(伪)类挑选器 | 10 |
id挑选器 | 100 |
行内款式 | 1000 |
庞杂挑选器(子女,子代,伪类)终究的权重为各个挑选器权重值之和,群组挑选器权重以每一个挑选器零丁的权重为准,不举行相加盘算 例 :
/*群组挑选器之间相互自力,不影响优先级*/ body,h1,p{ /*标签挑选器权重为 1 */ color:red; } .c1 a{ /*当前组合挑选器权重为 10+1 */ color:green; } #d1>.c2{ /*当前组合挑选器权重为 100+10 */ color:blue; }
元素的尺寸和色彩
元素的尺寸
- px 像素单元
- % 百分比 相对父元素
- em 相对单元 1 em=16px 平常用于挪动端的页面开发 经常使用1.5em
- rpx 小程序页面的单元
当页面元素的内容大小超越了元素的宽度,能够运用 overflow 属性 来处置惩罚超越部份的展现体式格局,发起运用auto;
色彩
元素的字体,背景,边框都邑运用到色彩。运用体式格局 color:red;
色彩有以下几种表达要领:
- 英文单词 red
- rgb:R G B 是红蓝绿三基色, 三个值的大小离别在(0~225)之间,
- rgba: a是通明度 值在(0~1)之间。a的值越小,越通明。
- 长16进制代表色彩:#ffffff; #000000
- 短16进制代表色彩:#fff;#000
盒子模子
盒模子是针对块元素的,由于每一个块元素就相当于一个盒子,有边框(border)、外边距(margin)和内边距(padding)。
- 在容器模子中,它划定了元素处置惩罚内容、内边距、边框和外边距的大小
- 最内里是内容,围困内容的是内边距,内边距的边沿是边框
- 边框以外是外边距,外边距默许是通明的
盒模子相干的属性会影响元素在文档中的现实占位,进而影响规划
边框
border:width style color;
当border-color设置为transparent时,为通明,隐蔽边框。
边框款式border-style属性经常使用的取值:
- solid:实线边框
- dotted:点线边框
- dashed:虚线边框
- double:双线边框
CSS边框属性许可零丁设置某一方向的边框属性
- border-top:设置上边框
- border-bottom:设置下边框
- border-left:设置左侧框
- border-right:设置右侧框
一些特别的边框案例:
网页三角标制造:标签元素设置宽高为0、一致设置四个方向通明边框、调解某个方向边框色彩
width: 0;
height: 0;
margin: 0 auto;
border: 50px solid blue;
border-bottom-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
圆角边框:border-radius 指定边框角的圆角半径
width: 0;
height: 0;
border: 50px solid red;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: green;
当border-radius为长宽的一半时,就是圆了,假如要设置圆角边框能够把边框圆半径border-radius的值设置小一点。
当某个属性能够取四个方向的值得时刻,离别对应以下规律,
- 一个值 示意一致设置上右下左
- 两个值 示意离别设置高低 摆布
- 三个值 示意离别设置上右下,摆布保持一致
- 四个值 示意离别设置上右下左
能够取四个值得经常使用属性有:border-style、border-width 、 border-color、padding、margin。
表面线
属性:outline
取值:width style color
线边框现实占位,表面不占位,取none能够作废文本输入框默许表面线
盒暗影
属性:box-shadow
取值:h-shadow v-shadow blur spread color;
- h-shadow 取像素值,暗影的水平偏移间隔
- v-shadow 取像素值,暗影的垂直偏移间隔
- blur 取像素值,示意暗影的隐约水平,值越大越隐约
- spread 选填,取像素值,暗影的尺寸
- color 设置暗影色彩,默许为黑色
内边距
属性:padding
作用:调解元素内容框与边框之间的间隔
取值:单元是 px 或百分比,但不许可运用负值。内边距padding支撑上右下左取值。
内边距也能够单方向取值:padding-top、padding-right、padding-bottom、padding-left
外边距
属性:margin
作用:调解本元素与其他元素之间的间隔
margin:0; 作废默许外边距
margin:0 auto; 摆布自动外边距,完成元素在父元素范围内水平居中
margin:-10px;元素位置的微调
内边距也能够单方向取值:margin-top、margin-right、margin-bottom、margin-left
外边距兼并问题:当一个元素包括在另一个元素中时,它们的上和包括上/或下和包括下外边距也会发作兼并。元素之间同时设置垂直方向的外边距,终究取较大的值 包括兼并
盒模子终究尺寸的盘算= width/height+padding+border+margin
页面规划
默许规划体式格局,根据代码誊写序次及标签范例从上到下,从左到右顺次展现
定位规划 position
连系定位属性调解元素的展现位置
position: static;
属性值:
- static:默许,没有定位
- fixed(牢固定位):参照浏览器窗口举行定位,不追随网页转动而转动;
- relative(相对定位):可参照元素在文档中的原始位置举行偏移
- absolute(相对定位):参照离他近来的已定位的先人元素举行偏移,假如没有,则参照窗口举行偏移;在文档中不占位,能够手动设置宽高
设置好定位后,就能够入手下手设置偏移属性了,设置定位的元素能够运用偏移属性调解间隔参照物的位置
- top 距参照物的顶部
- right 距参照物的右侧
- bottom 距参照物的底部
- left 距参照物的左侧
h2.pos_top { position:relative; top:-50px; }
平常状况才采纳 "父相子绝" : 父元素设置相对定位,子元素相对定位,参照已定位的父元素偏移。
堆叠序次
元素发作堆叠时能够运用 z-index 属性调解已定位元素的展现位置,值越大元素越靠上:
属性 : z-index
取值 : 无单元的数值,数值越大,越靠上
堆叠划定规矩:
- 定位元素与文档中一般元素发作堆叠,永久是已定位元素在上
- 同为已定位元素发作堆叠,根据 HTML 代码的誊写序次,后来者居上
溢出规划 overflow
overflow:用于掌握内容溢出元素框时展现的体式格局。
属性值:
- visible:默许值,不会修剪,内容会呈如今元素框以外
- hidden:内容会被修剪,其他内容不可见
- scroll:多出内容以转动条情势检察
- auto:会自动挑选,假如内容被修剪,多出部份以转动条情势展现
注重:overflow 属性只事情于指定高度的块元素上。
浮动规划 float
重要用于设置块元素的水平分列,所以假如要运用float,要把元素变成块元素display:block;,或许元素已是块元素。
属性值:
- float: left; 设置元素向左浮动
- float: right; 设置元素向右浮动
特性
- 元素设置浮动会从原始位置脱流,向左或向右顺次停靠在其他元素边沿,在文档中不再占位
- 元素设置浮动,就具有块元素的特性,能够手动调解宽高
- "笔墨围绕":浮动元素遮挡一般元素的位置,没法遮挡一般内容的展现,内容围绕在浮动元素四周展现
常见问题
子元素悉数设置浮动,致使父元素高度为0,影响父元素背景色和背景图片展现,影响页面规划
处置惩罚
- 关于内容牢固的元素,假如子元素都浮动,能够给父元素牢固高度(例:导航栏)
- 指定元素两侧不能涌现浮动元素。设置 clear:both; 消灭浮动
- 为父元素设置 overflow:hidden; 处置惩罚高度为0
展现(Display)与可见性(Visibility)
隐蔽元素
隐蔽元素有两种完成要领
- display:none
- visibility:hidden
注重:这两种要领会发生差别的结果,visibility:hidden隐蔽的元素仍占用与未隐蔽之前一样的空间。也就是说,该元素虽然被隐蔽了,但仍然会影响规划。
块元素和内联元素的转变
将元素变成内联元素
display:inline;
将元素变成块元素
display:block;
背景属性
CSS 属性定义背景结果:
- background-color:背景色彩
- background-image:背景图片
- background-repeat:设置平铺体式格局
- background-attachment:背景图象是不是牢固或许跟着页面的其他部份转动。
- background-position:展现位置
背景色彩
background-color: red;
背景图片
默许状况下举行平铺反复展现,以掩盖全部元素实体.
background-image : url("图片途径");
设置背景图片,指定图片途径,假如途径中涌现中文或空格,须要加引号
设置色彩渐变
能够运用两个或两个以上节点
/*上->下,红变蓝*/ background-image: linear-gradient(#e66465, #9198e5); /*左->右,红变黄*/ background-image: linear-gradient(to right, red , yellow); /*从左上角入手下手,红变黄*/ background-image: linear-gradient(to bottom right, red, yellow); /*带有通明度的渐变*/ background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*径向渐变*/ background-image: radial-gradient(red, yellow, green);
设置背景图片的平铺反复体式格局
默许背景图片从元素的左上角展现,假如图片尺寸与元素尺寸不婚配时,会涌现以下状况:
- 假如元素尺寸大于图片尺寸,会自动反复平铺,直至铺满全部元素
- 假如元素尺寸小于图片尺寸,图片默许从元素左上角入手下手展现,超越部份不可见
平铺体式格局
background-repeat
取值 :
- repeat: 默许值,沿水温和垂直方向反复平铺
- repeat-x: 沿X轴反复平铺
- repeat-y: 沿Y轴反复平铺
- no-repeat: 不反复平铺
背景是不是牢固
background-attachment:fixed;
属性值:
- fixed:牢固,背景图片不会跟着页面转动而转动
- scroll:跟着页面转动而转动
- local:跟着页面元素转动而转动
展现位置
默许显如今元素左上角
background-position:x y;
取值体式格局:
1. 像素值
设置背景图片的在元素坐标系中的出发点坐标
2. 方位值
水平方向取值:left/center/right
垂直方向取值:top/center/bottom
注:假如只设置某一个方向的方位值,别的一个方向默许为center
精灵图手艺:为了削减收集要求,能够将一切的小图标拼接在一张图片上,一次收集要求悉数获得;借助于background-position 对背景图片入手下手位置举行调解,完成展现差别的图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #sp { border: solid 1px red; /* 设置展现背景图片的宽度和高度 */ width: 25px; height: 25px; margin: 0 auto; background-image: url("imgs/img07.png"); } #sp2 { border: solid 1px red; /* 设置展现背景图片的宽度和高度 */ width: 25px; height: 25px; margin: 0 auto; background-image: url("imgs/img07.png"); background-position: 0 -25px; } #sp3 { border: solid 1px red; /* 设置展现背景图片的宽度和高度 */ width: 25px; height: 25px; margin: 0 auto; background: url("imgs/img07.png") 0 -50px; } </style> </head> <body> <div id="sp"></div> <div id="sp2"></div> <div id="sp3"></div> </body> </html>
案例代码
设置背景图片的尺寸
background-size:width height;
取值体式格局 :
1. 像素值
500px 500px:同时指定宽高
500px: 指定宽度,高度自适应
2. 百分比:参照元素的尺寸举行盘算
50% 50%; 依据元素宽高,离别盘算图片的宽高
50%; 依据元素宽度盘算图片宽高,图片高度等比例缩放
背景属性简写
background:color url("") repeat position;
注重 :
- 假如须要同时设置以上属性值,遵循相应序次誊写
- background-size 零丁设置
文本格式
字体款式
字体系列
font-family:"黑体","Microsoft YaHei",Arial;
取值:
- family-name:字体范例称号:“宋体”、“微软雅黑”。实在中笔墨体也有英文名,都是一样的。
- generic-family:字体系列称号:“serif”、“sans-serif”、“monospace”...
注重:能够指定多个字体称号作为备选字体,运用逗号离隔,假如浏览器不支撑第一个字体,则会尝试下一个;假如字体称号为中文,或许称号中涌现了空格,必需运用引号
Serif 和 Sans-serif 字体之间的区分
sans-serif 字体比较适合在屏幕上浏览,而 serif 字体更轻易在纸上浏览。“sans”指无。
自定义字体
<style> @font-face { font-family: myFirstFont; /*自定义字体名*/ src: url(sansation_light.woff); /*自定义字体URL*/ } div { font-family:myFirstFont; } </style>
字体大小
font-size:20px;
浏览器默许字体大小是16px,1em=16px,
字体粗细
font-weight:normal;
- normal(默许值)等价于400
- bold (加粗) 等价于700
斜体
font-style:italic;
字体属性
font : style weight size family;
注重 :
- 假如四个属性值都必需设置,严厉根据序次书
- size family 是必填项
文本款式
文本色彩
- 十六进制值,如: #FF0000
- 一个RGB值,如: RGB(255,0,0)
- 色彩的称号,如: red
color:red;
文本装潢线
/*删除文本装潢*/ text-decoration:none;
取值 :
- underline:下划线
- overline:上划线
- line-through:删除线
- none:作废装潢线
在CSS中,运用text-decoration属性来定义段落文本的下划线、删除线和顶划线。none即为默许值,能够用这个属性值也能够去掉已有下划线或删除线或顶划线的款式。
水平对齐体式格局
text-align:center;
取值 :
- left:左对齐(默许值)
- center:居中对齐
- right:右对齐
- justify:两头对齐
行高
line-height:30px;
运用 : 文本在当前行中永久垂直居中,能够借助行高height调解文本在元素中的垂直展现位置
- line-height = height 设置一行文本在元素中垂直居中
- line-height > height 文本下移展现
- line-height < height 文本靠上展现
特别:line-height能够采纳无单元的数值,代表当前字体大小的倍数,以此盘算行高
字符间距
letter-spacing:2px /*字母(汉字)与字母(汉字) 之间的间距*/
word-spacing:30px; /*单词与单词 之间的间距*/
文本缩进
text-indent:50px;
大小写转换
text-transform:uppercase;
属性值:
- uppercase:文本大小
- lowercase:文本小写
- capitalize:首字母大写
笔墨方向
direction:rtl; /*right to left*/
属性值:
- ltr:默许,从左向右
- rtl:从右向左
列表款式
经由过程列表款式,设置列表项标记的图象(小黑点、小方框、数字、字母...)。
list-style-type: circle; /*设置标记为圆圈*/
经常使用属性值:
- none:无标记
- disc:默许。标记是实心圆。
- circle:标记是空心圆。
- square:标记是实心方块。
- decimal:标记是数字。
- lower-roman / upper-roman:小写或大写罗马数字(i, ii, iii, iv, v, I, II, III, IV, V, )
- lower-alpha / upper-alpha:小/大写写英笔墨母
鼠标箭头款式
cursor:default;
属性值:
- url:自定义光标的URL
- default:默许光标
- auto:浏览器默许光标
- crosshair:十字线
- move:可挪动的图标
- wait:转圈守候的光标
- help:问号
- text:可选文本的光标
提醒东西
先让提醒文本隐蔽,当鼠标划过须要提醒的处所的时刻,再让提醒文本展现。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS 教程</title> </head> <style> /*鼠标挪动到这*/ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } /*提醒文本*/ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* 定位 */ position: absolute; z-index: 1; } /*当鼠标划过期,提醒展现*/ .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <div class="tooltip"> 鼠标挪动到这<span class="tooltiptext">提醒文本</span> </div> </body> </html>
因而当我们须要提醒条出如今高低摆布的时刻,只须要在提醒条的定位中举行修正。
右侧
.tooltip .tooltiptext { top: -5px; /*提醒条向上挪动5px*/ left: 105%; /*提醒条向右挪动5px*/ }
左侧
.tooltip .tooltiptext { top: -5px; /*提醒条向上挪动5px*/ right: 105%; /*提醒条向右挪动5px*/ }
上面
.tooltip .tooltiptext { width: 120px; bottom: 100%; /*底部撑满,移到最上面*/ left: 50%; /*左侧取一半,到中心*/ margin-left: -60px; /* 向左移,居中 */ }
下面
.tooltip .tooltiptext { width: 120px; top: 100%; /*上面取满,到底部*/ left: 50%; /*到中心*/ margin-left: -60px; /* 向左移居中 */ }
指向性箭头
/*在后面增加款式*/ .tooltip .tooltiptext:after { content: " "; /*内容为空*/ position: absolute; top: 100%; /* 提醒东西底部 */ left: 50%; /* 到中心 */ margin-left: -5px; /* 居中 */ border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <style> .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <br><br> <div class="tooltip">鼠标挪动到我这 <span class="tooltiptext">提醒文本</span> </div> </body> </html>
完全代码
其他方向顺次类推
通明属性
opacity:0.5;
0是全通明,1是不通明。
过渡属性
transition:将鼠标悬停在一个元素上,逐渐该元素的属性 值:
/*逐渐转变宽度从 100px 到 300px */ div { width:100px; transition: width 2s; } div:hover {width:300px;}
transition-delay: 2s; 耽误2s再,变更。
媒体范例
媒体范例许可我们指定HTML文档将如安在差别媒体展现。该文档能够以差别的体式格局显如今电脑屏幕上,手机上、平板上和纸张上。
@media 划定规矩
@media 属性值:
- all:用于一切媒体装备
- print:用于打印机
- handheld:用于很小的手持装备
- screen:用于电脑展现器
- tv:用于电视
案例:在电脑屏幕上,字体14px,打印的时刻,字体10px。
@media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} }
屏幕尺寸相应式规划
/* 相应式规划 - 屏幕尺寸小于 800px 时,两列规划改成高低规划 */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } }
动画 @keyframes
@keyframes 划定规矩是建立动画,建立一个动画演示,提供给animation属性挪用。
@keyframes myfirst { from {background: red;} to {background: yellow;} } div { animation: myfirst 5s; }
还能够运用百分比来划定变化发作的时候,关键词 "from" 和 "to",等同于 0% 和 100%。
@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }