css背景与动画属性

background:

background-origin属性规定background-position属性相对于什么位置来定位,而background-clip 属性规定背景的绘制区域，这两个要注意区分。

background-image: url(images/red.jpg);
background-repeat: no-repeat;
background-origin: content-box;
background-position: center center;background-clip:border-box;

　　background-size规定图像的大小，该属性可用来定义动画。

img:hover {
     background-size: 105% 105%;
}

　　以上属性都可以用background属性简写。

div{
 background: url(images/red.jpg) no-repeat center center;
}

　　css3还可以增加多个背景，这在以前是只能通过嵌套的方式来实现的。

div{
 background: url(images/red.jpg) no-repeat center center, url(images/black.jpg);
}

　　list-style-type可以定义列表项标记的类型。

ul{
list-style-type:circle;
}

　　列表项标记还可以用list-style-image代替，从而用图片来实现标记。不过这个属性只能定义一次，因此background属性更好用。

transform属性是css3的一个新属性，可以定义2d或3d转换。

transform: translate(100px,70px) rotate(90deg) scale(2,4) skew(30deg,40deg);
			/*位移、旋转、放大或缩小、翻转*/

　　这几个属性要自己去试了才能感受其奥妙，要加动画效果可以用transition属性。

div{
transition:width 3s ease-in-out 3s;
}

　　这几个值分别定义的是动画名称、动画时长、动画速度还有动画延迟时间。

不过要说定义复杂动画还是animation更好用。