第十四天笔记，CSS3背景属性及过渡

CSS3 背景的新增属性(续)

Background-origin 背景原点

属性：

padding-box;背景从padding部分开始显示

border-box;背景从border部分开始显示（默认）

content-box;背景从内容部分开始显示

Background-clip 背景裁切

border-box 背景被裁剪到边框盒（默认） padding-box 背景被裁剪到内边距框 content-box 背景被裁剪到内容框

css3多背景属性

background:url(图片) no-repeat left top,url(图片) no-repeat left top,url(图片) no-repeat left top,url(图片) no-repeat left top;

CSS3 2D之transform

1.平移：

transform:translate(x,y)

translateX(X)

translateY(Y)

2.缩放：

transform:scale(x,y)

scaleX(x)

scaleY(y)

3.旋转：

transform:rotate(x,y)(单位deg)

rotateX(x)

rotateY(y)

4.倾斜：

transform:skew(x,y)(单位deg)

skewX(x)

skewY(y)

合体：transform:translate(x,y) rotate(x,y)

变形原点：

transform-origin：用方位或数值

盒子居中

position:absolute;

top:0px;

left:0px;

right:0px;

bottom:0px;

margin:auto;

CSS3过渡

transition过渡：

允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

transition-property:属性名（指定的属性）/none（没有属性gaibian）/all（所有的属性）

transition-duration:过渡的时间

transition-timing-function:动画类型,ease：由快到慢到更慢；linear：匀速；ease-in：越来越快；ease-out越来越慢；ease-in-out：先加速后减速

transition-delay:过渡效果开始前的延迟时间，秒或毫秒；

语法： transition: property duration timing-function delay;

默认值：transition:all 0 ease 0

哪个元素需要加过渡动画就给哪个元素加transition