css3新增功能
CSS3新增功能
1 CSS3选择器详解
1.1 基础选择器
- 通配选择器
*
- 元素选择器
E
- ID选择器
#id
- CLASS选择器
.class
- 群组选择器
select1,selectN
1.2 层次选择器
- 后代选择器
E F
- 子选择器
E>F
- 相邻兄弟选择器
E+F
- 通用兄弟选择器
E~F
1.3 属性选择器
E[attr]
选择具有att属性的E元素。E[attr="val"]
选择具有att属性且属性值等于val的E元素。E[attr~="val"]
选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。E[attr^="val"]
选择具有att属性且属性值为以val开头的字符串的E元素。E[attr$="val"]
选择具有att属性且属性值为以val结尾的字符串的E元素。E[attr*="val"]
选择具有att属性且属性值为包含val的字符串的E元素。E[attr|="val"]
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。
1.4 伪类选择器
动态伪类选择器
E:link
设置超链接a在未被访问前的样式。
注意,a:hover 必须位于 a:link 和 a:visited 之后,a:active 必须位于 a:hover 之后
E:visited
设置超链接a在其链接地址已被访问过时的样式。
E:hover
设置元素在其鼠标悬停时的样式。
E:active
设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
E:focus
设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式。
目标伪类选择器
E:target
匹配相关URL指向的E元素。
语言伪类选择器
E:lang(fr)
匹配使用特殊语言的E元素
UI元素伪类选择器
E:checked
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled
匹配用户界面上处于可用状态的表单元素
E:disabled
匹配用户界面上处于禁用状态的表单元素
结构伪类选择器
E:root
匹配E元素在文档的根元素。在HTML中,根元素永远是HTML
E:first-child
匹配父元素的第一个子元素E。
E:last-child
匹配父元素的最后一个子元素E。
E:only-child
匹配父元素仅有的一个子元素E。
E:nth-child(n)
匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
E:nth-last-child(n)
匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。
E:first-of-type
匹配同类型中的第一个同级兄弟元素E
E:last-of-type
匹配同类型中的最后一个同级兄弟元素E
E:only-of-type
匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E
E:empty
匹配没有任何子元素(包括text节点)的元素E
否定伪类选择器
E:not(s)
匹配不含有s选择符的元素E
1.5 伪元素选择器
E:first-letter/E::first-letter
设置对象内的第一个字符的样式。
E:first-line/E::first-line
设置对象内的第一行的样式。
E:before/E::before
设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E:after/E::after
设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E::placeholder
设置对象文字占位符的样式。
E::selection
设置对象被选择时的样式。
2 CSS3 基本功能
2.1 CSS3新增长度单位
- rem 相对于根元素(即html元素)font-size计算值的倍数
- vm 视口被均分为100单位的vw
- vh 视口被均分为100单位的vh
- vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
- vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
2.2 CSS3新增颜色单位
RGBA(R,G,B,A) A:Alpha透明度。取值0~1之间。
HSL(H,S,L)
H: Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S:Saturation(饱和度)。取值为:0.0% - 100.0%
L:Lightness(亮度)。取值为:0.0% - 100.0%
HSLA(H,S,L,A)
2.3 CSS3渐变(了解)
线性渐变
语法
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
取值
<angle>:用角度值指定渐变的方向(或角度)。
to left: 设置渐变为从右到左。相当于: 270deg
to right:设置渐变从左到右。相当于: 90deg
to top: 设置渐变从下到上。相当于: 0deg
to bottom: 设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。
<color-stop> 用于指定渐变的起止颜色:
<color>: 指定颜色。
<length>: 用长度值指定起止色位置。不允许负值
<percentage>: 用百分比指定起止色位置。
示例
linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);
径向渐变
语法
<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
<position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
<shape> = circle | ellipse
<size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]
<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
<circle-size> = <length>
<ellipse-size> = [ <length> | <percentage> ]{2}
<shape-size> = <length> | <percentage>
<color-stop> = <color> [ <length> | <percentage> ]?
取值
<position> 确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center
<percentage>①:用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①:用长度值指定径向渐变圆心的横坐标值。可以为负值。
left:设置左边为径向渐变圆心的横坐标值。
center①:设置中间为径向渐变圆心的横坐标值。
right:设置右边为径向渐变圆心的横坐标值。
<percentage>②:用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②:用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top:设置顶部为径向渐变圆心的纵坐标值。
center②:设置中间为径向渐变圆心的纵坐标值。
bottom:设置底部为径向渐变圆心的纵坐标值。
<shape> 确定圆的类型
circle:指定圆形的径向渐变
ellipse:指定椭圆形的径向渐变。
<extent-keyword> circle | ellipse 都接受该值作为 size
closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角
<circle-size> circle 接受该值作为 size
<length>:用长度值指定正圆径向渐变的半径长度。不允许负值。
<ellipse-size> ellipse 接受该值作为 size
<length>:用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
<percentage>:用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
<color-stop> 用于指定渐变的起止颜色:
<color>:指定颜色。
<length>:用长度值指定起止色位置。不允许负值
<percentage>:用百分比指定起止色位置。不允许负值
示例
radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);
3 CSS3 新增基本属性
3.1 布局相关属性
- box-sizing 定义盒子模型的尺寸解析方式
>content-box(默认)
>border-box
- resize 否允许用户缩放,调节元素尺寸大小
none: 不允许用户调整元素大小。 (默认)
both: 用户可以调节元素的宽度和高度。
horizontal: 用户可以调节元素的宽度
vertical: 用户可以调节元素的高度。
- display 盒子是否以及如何显示
> none: 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
> inline: 指定对象为内联元素。
> block: 指定对象为块元素。
> list-item: 指定对象为列表项目。
> inline-block: 指定对象为内联块元素。(CSS2)
> table: 指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
> inline-table: 指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
> table-caption: 指定对象作为表格标题。类同于html标签<caption>(CSS2)
> table-cell: 指定对象作为表格单元格。类同于html标签<td>(CSS2)
> table-row: 指定对象作为表格行。类同于html标签<tr>(CSS2)
> table-row-group: 指定对象作为表格行组。类同于html标签<tbody>(CSS2)
> table-column: 指定对象作为表格列。类同于html标签<col>(CSS2)
> table-column-group: 指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
> table-header-group: 指定对象作为表格标题组。类同于html标签<thead>(CSS2)
> table-footer-group: 指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
> run-in: 根据上下文决定对象是内联对象还是块级对象。(CSS3)
> box: 将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
> inline-box: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
> flexbox: 将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
> inline-flexbox: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
> flex: 将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
> inline-flex: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
3.2 外轮廓
outline 给元素周围绘制一条轮廓线
<' outline-width '> || <' outline-style '> || <' outline-color '>
outline-width 外廓线宽度
: 用长度值来定义轮廓的厚度。不允许负值 medium: 定义默认宽度的轮廓。 thin: 定义比默认宽度细的轮廓。 thick: 定义比默认宽度粗的轮廓。
outline-style 外廓线风格
none: 无轮廓。与任何指定的 <' outline-width '> 值无关 dotted: 点状轮廓。 dashed: 虚线轮廓。 solid: 实线轮廓 double: 双线轮廓。两条单线与其间隔的和等于指定的 <' outline-width '> 值 groove: 3D凹槽轮廓。 ridge: 3D凸槽轮廓。 inset: 3D凹边轮廓。 outset: 3D凸边轮廓。
outline-color 外廓线颜色
- outline-offset 外廓线的偏移量
3.3 颜色
- opacity 检索或设置对象的不透明度。 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果
4 CSS3新增边框和背景属性
4.1 边框圆角
border-radius
设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数 水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。 如果只提供一个,将用于全部的于四个角。 如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。 如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。
border-top-left-radius 设置或检索对象的左上角圆角边框
border-top-right-radius 设置或检索对象的右上角圆角边框
border-bottom-right-radius 设置或检索对象的右下角圆角边框
border-bottom-left-radius 设置或检索对象的左下角圆角边框
4.2 盒子阴影
box-shadow 设置元素的阴影
值: none | [ , ]*
= inset? && {2,4} && ?取值:
none: 无阴影
<length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>: 设置对象的阴影的颜色。
inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
可以设定多组效果,每组参数值以逗号分隔
test .outset {
box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
box-shadow:
0 0 5px 3px rgba(255, 0, 0, .6),
0 0 5px 6px rgba(0, 182, 0, .6),
0 0 5px 10px rgba(255, 255, 0, .6);
}
box-reflect 倒影 (仅webkit 了解)
值: box-reflect:none | ? ?
取值:
direction
above: 指定倒影在对象的上边
below: 指定倒影在对象的下边
left: 指定倒影在对象的左边
right: 指定倒影在对象的右边
offset
<length>: 用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>: 用百分比来定义倒影与对象之间的间隔。可以为负值
mask-box-image
none: 无遮罩图像
<url>: 使用绝对或相对地址指定遮罩图像。
<linear-gradient>: 使用线性渐变创建遮罩图像。
<radial-gradient>: 使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>: 使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>: 使用重复的径向(放射性)渐变创建遮罩图像。
4.3 CSS3新增背景属性
background: bg-image bg-position / bg-size bg-repeat bg-attachment bg-origin bg-clip bg-color
background-origin 背景图片原点
取值:
padding-box:(默认值) 从padding区域(含padding)开始显示背景图像。
border-box: 从border区域(含border)开始显示背景图像。
content-box: 从content区域开始显示背景图像。
backgroun-clip 指定对象的背景图像向外裁剪的区域。
取值:
padding-box: 从padding区域(不含padding)开始向外裁剪背景。
border-box: (默认值)从border区域(不含border)开始向外裁剪背景。
content-box: 从content区域开始向外裁剪背景。
text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果
background-size 背景图像的尺寸
<length>: 用长度值指定背景图像大小。不允许负值。
<percentage>: 用百分比指定背景图像大小。不允许负值。
auto: 背景图像的真实大小。
cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
CSS3多背景
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;
4.4 CSS3边框图片(了解)
border-image
border-image:<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat ' 复合属性。设置或检索对象的边框样式使用图像来填充。
border-image-source 设置或检索对象的边框样式使用图像路径。 值: url
border-image-slice 设置或检索对象的边框背景图的分割方式。 值: 浮点数/百分比
border-image-width 设置或检索对象的边框厚度。值: 长度值/百分比/浮点数
border-image-outset 设置或检索对象的边框背景图的扩展 值: 长度值/浮点数
border-image-repeat 设置或检索对象的边框图像的平铺方式。
值:
stretch: 指定用拉伸方式来填充边框背景图。
repeat: 指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
round: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space: 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
5 CSS3变换/过渡/动画
5.1 变换(transform)
相关属性
transform
设置或检索对象的转换。
取值
none (默认值)无转换
2D Transform Functions:
matrix(): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translatex(): 指定对象X轴(水平方向)的平移
translatey(): 指定对象Y轴(垂直方向)的平移
rotate(): 指定对象的2D rotation(2D旋转),需先有 <' transform-origin '> 属性的定义
scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scalex(): 指定对象X轴的(水平方向)缩放
scaley(): 指定对象Y轴的(垂直方向)缩放
skew(): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
skewx(): 指定对象X轴的(水平方向)扭曲
skewy(): 指定对象Y轴的(垂直方向)扭曲
3D Transform Functions:
matrix3d(): 以一个4x4矩阵的形式指定一个3D变换
translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
translatez(): 指定对象Z轴的平移
rotate3d(): 指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数不允许省略
rotatex(): 指定对象在x轴上的旋转角度
rotatey(): 指定对象在y轴上的旋转角度
rotatez(): 指定对象在z轴上的旋转角度
scale3d(): 指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
scalez(): 指定对象的z轴缩放
perspective(): 指定透视距离
transform-origin
设置或检索对象以某个原点进行转换。 用法
如果提供两个值,第一个用于横坐标,第二个用于纵坐标。
如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
3D变形需要制定Z坐标 第三个参数值
取值
left right center <lenght> <percentage>
top bottom center <lenght> <percentage>
transform-style
指定某元素的子元素是(看起来)位于三维空间内,还是在该元素所在的平面内被扁平化。 flat: (默认)指定子元素位于此元素所在平面内 preserve-3d: 指定子元素定位在三维空间内
perspective
指定观察者与「z=0」平面的距离,使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大,而「z<0」时则比正常小,大小程度由该属性的值决定。
none: 不指定透视 : 指定观察者距离「z=0」平面的距离,为元素及其内容应用透视变换。不允许负值
perspective-origin
设置透视点的位置
用法
该属性提供2个参数值。
如果提供两个,第一个用于横坐标,第二个用于纵坐标。
如果只提供一个,该值将用于横坐标;纵坐标将默认为center。
取值
left right center <lenght> <percentage>
top bottom center <lenght> <percentage>
backface-visibility
指定元素背面面向用户时是否可见。 决定一个元素背面面向用户时是否可见,需要直接在该元素上定义 <' backface-visibility '> 属性,而不能在其父元素上,因为该属性默认为不可继承。 取值
visible: (默认)指定元素背面可见,允许显示正面的镜像。
hidden: 指定元素背面不可见
2D变换
2D位移
- translate(x, y)
- translatex()
- translatey()
2D缩放
- scale(x, y)
- scalex()
- scaley()
2D旋转
- rotate(deg)
2D倾斜
- skew(x,y)
- skewx()
- skewy()
2D矩阵
- matrix()
3D变换
3D位移
- translate3d(x, y, z)
- translatez()
3D缩放
- scale3d()
- scalez()
3D旋转
- rotate3d(x, y, z, a)
- rotatex()
- rotatey()
- rotatex()
3D矩阵
- matrix3d()
多重变形
-webkit-transform:translate(-50%, -50%) rotate(45deg);
-moz-transform:translate(-50%, -50%) rotate(45deg);
-ms-transform:translate(-50%, -50%) rotate(45deg);
-o-transform:translate(-50%, -50%) rotate(45deg);
transform:translate(-50%, -50%) rotate(45deg);
5.2 过渡(transition)
过渡相关属性
transition 检索或设置对象变换时的过渡。
注意:
如果只提供一个参数,则为 <' transition-duration '> 的值定义;如果提供二个参数,则第一个为 <' transition-duration '> 的值定义,第二个为 <' transition-delay '> 的值定义
用法 transition:[,]* = [ none | ] || || ||
transition-property 设置对象中的参与过渡的属性
默认值为:all。默认为所有可以进行过渡的css属性。 如果提供多个属性值,以逗号进行分隔。 取值
none: 不指定过渡的css属性
all: 所有可以进行过渡的css属性
<IDENT>: 指定要进行过渡的css属性
那些CSS属性可以被过渡
颜色属性
具有长度值 百分比的属性
值是数字的属性 如 z-index opacity outline-offset等
变形系列属性
阴影
渐变
transition-duration 设置对象过渡的持续时间
如果提供多个属性值,以逗号进行分隔。
transition-timing-function 设置对象中过渡的动画类型
取值
ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier(, , , ): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内 http://cubic-bezier.com/ steps([, [ start | end ] ]?): 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。transition-delay 设置对象延迟过渡的时间
CSS3触发过渡的条件
- 伪元素触发
- 媒体查询
- JavaScript触发
5.3 动画
关键帧
帧——就是动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头。
关键帧语法
@keyframes { }
:[ [ from | to | ]{ sRules } ][ [ , from | to | ]{ sRules } ]*
@keyframes testanimations {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes testanimations {
from { transform: translate(0, 0); }
20% { transform: translate(20px, 20px); }
40% { transform: translate(40px, 0); }
60% { transform: translate(60px, 20); }
80% { transform: translate(80px, 0); }
to { transform: translate(100px, 20px); }
}
@keyframes testanimations{
0% { transform: translate(0, 0); }
20% { transform: translate(20px, 20px); }
40% { transform: translate(40px, 0); }
60% { transform: translate(60px, 20px); }
80% { transform: translate(80px, 0); }
100% { transform: translate(100px, 20px); }
}
相关属性
animation 设置对象所应用的动画特效
如果提供多组属性值,以逗号进行分隔。
注意:如果只提供一个参数,则为 <' animation-duration '> 的值定义;如果提供二个参数,则第一个为 <' animation-duration '> 的值定义,第二个为 <' animation-delay '> 的值定义
用法
animation: <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>
animation-name 设置对象所应用的动画名称
必须与规则@keyframes配合使用,因为动画名称由@keyframes定义
animation-duration 设置对象动画的持续时间
animation-timing-function 设置对象动画的过渡类型
ease: (默认)平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) step-start: 等同于 steps(1, start) step-end: 等同于 steps(1, end) steps([, [ start | end ] ]?): 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。 cubic-bezier(, , , ): 特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
animation-delay 指定对象动画的延迟时间
animation-iteration-count 指定动画的具体循环次数
number:动画循环次数 infinite: 无限循环
animation-direction 设置对象动画在循环中是否反向运动
normal: 正常方向 (默认) reverse: 反方向运行 alternate: 动画先正常运行再反方向运行,并持续交替运行 alternate-reverse: 动画先反运行再正方向运行,并持续交替运行
animation-play-state 设置对象动画的状态
running: 运动 (默认) paused: 暂停
animation-fill-mode 设置对象动画时间之外的状态
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。 backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是from 关键帧中的值(当 animation-direction 为 "normal" 或 "alternate" 时)或 to 关键帧中的值(当 animation-direction 为 "reverse" 或 "alternate-reverse" 时)。 both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
6 CSS3嵌入WEB字体
6.1 什么是@font-face
- 可以把字体放置在服务器上,而不受制于客户端系统字体
- 浏览器会根据指定的命令将对应的字体下载到本地缓存
- 1998年@font-face加入到css2中, 但css2.1中又被移出,css3重新加入
- IE兼容性极好
6.2 @font-face语法
格式
@font-face {
font-family: <identifier>;
src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*;
[<font>];
}
相关参数
identifier 字体名称
url 此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径
string 字体的格式,主要用来帮助浏览器识别, format(fontType)
truetype .ttf
Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+ IE9+
opentype .otf
Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+
Web Open Font Format .woff
Firefox 3.5+ Chrome 6+ Safari 3.6+ Opera 11.1+ IE9+
embedded Open Type .eot
IE4+
svg .svg
Chrome 4+ Safari 3.1 + Opera 10+ IOS Mobile Safari 3.2+
font 定义字体相关样式
font-weight
font-style
font-size
font-variantfont-stretch
兼容性处理
@font-face {
font-family: 'diyfont';
src: url('diyfont.eot'); /* IE9兼容模式 */
src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */
url('diyfont.woff') format('woff'), /* chrome、firefox opera safari IE9+ 最佳格式 */
url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
6.3 字体工具
web字体定制
web字体转换
- https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具
6.4 使用字体图标
使用字体图标的优势
- 相比位图更加清晰
- 灵活性高,更方便改变大小、颜色、风格等
- 兼容性好,低版本IE也支持
常用的字体图标库
Font Awesome http://fontawesome.dashgame.com/
Glyphicons Halfings http://glyphicons.com/
字体图标制作工具
css3新增功能的更多相关文章
- CSS系列:CSS3新增选择器
1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- CSS选择器及CSS3新增选择器
转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- css3新增的属性 - 分享
CSS3新增属性 一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- ADO.NET 中的新增功能
ADO.NET 中的新增功能: .NET Framework (current version) 以下是 .NET Framework 4.5 中 ADO.NET 的新增功能. SqlClient D ...
- CSS3新增的选择器和属性
<!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...
- .NET Framework3.0/3.5/4.0/4.5新增功能摘要
Microsoft .NET Framework 3.0 .NET Framework 3.0 中增加了不少新功能,例如: Windows Workflow Foundation (WF) Windo ...
随机推荐
- VB6 如何创建一个标准控制台程序
打开 VB6 并新建一个标准EXE程序,把窗口删掉,然后再加入一个模块. 在模块中加入AllocConsole.FreeConsole.SetConsoleTitle.Sleep的API声明: Pub ...
- vue基础——组件(组件嵌套)
介绍 vue中页面是由组件组成的,即以.vue结尾的文件. .vue文件由三部分组成,分别是template.script.style. 分别写html.js.css代码. 组件之间可以互相嵌套.所以 ...
- JAVA 模拟瞬间高并发
如何模拟一个并发?当时我的回答虽然也可以算是正确的,但自己感觉缺乏实际可以操作的细节,只有一个大概的描述. 当时我的回答是:“线程全部在同一节点wait,然后在某个节点notifyAll.” 面试官: ...
- Delphi 停靠技术的应用3(两个窗体停靠成PageControl样式, 分页停靠)
Delphi 停靠技术的应用3(两个窗体停靠成PageControl样式, 分页停靠) 因为TPageControl组件重载了TWinControl组件的DoAddDockClient和DoRemov ...
- Python——序列
#!/usr/bin/python #coding:utf8 ''' Python——序列 字符串的操作 ''' s = 'abcdefg' print s print s[2] print s[-1 ...
- LinuxI/O 性能分析
.I/O linux 命令: ostat 监视I/O子系统 iostat [参数][时间][次数] 通过iostat方便查看CPU.网卡.tty设备.磁盘.CD-ROM 等等设备的活动情况, 负载信息 ...
- MVC001之权限校验
参考网址:http://bbs.csdn.net/topics/370002739 http://blog.csdn.net/chenloveyue/article/details/7095522 h ...
- cloudrea manager 调整datanode数据存储目录
由于datanode所需磁盘空间较大,所以工作中可能会涉及到给datanode增加磁盘目录或者更改数据目录 CM停止该datanode节点 CM页面增加目录或者修改目录 如果是修改目录的话 需要将服务 ...
- 在Objc项目中调用Swift
之前的文字中记录了在Swift项目中调用OC的相关代码,比较简单直接 传送门 但是在OC中调用swift代码则不是那么的和谐,网络上很多文章业已经有点陈旧.记录步骤如下: 1.创建OC项目 (1)启动 ...
- 分割回文串 II · Palindrome Partitioning II
[抄题]: 给定一个字符串s,将s分割成一些子串,使每个子串都是回文. 返回s符合要求的的最少分割次数. [思维问题]: 不知道要用预处理字符串降低复杂度 [一句话思路]: 先把预处理获得s中回文串的 ...