css3里的一些背景，动画

怎么把body设置成跟浏览器同样的宽高，

由于body默认是没有高度的，若是你不设置body的宽高，有时你在注册body事件时，是不能注册的。

在css3中Background后面能够跟不少属性：

Background-size：它是调整图片的大小的，它能够直接设置宽高，也能够设置两个特殊的值。Cover和contain，他们两个意思是不同的：

　　

Background-origin：它是指图片开始的位置，它通常有三个值：分别是从边框，边框内部，内容区域开始。

Content-box这个是用在若是有padding时的时候，若是没有padding，那内容区域和边框内部是同样的。

Background-clip：是图片裁剪的意思，用法跟origin是同样的。

Background-image：；它里面有两个值，分别表明是线性渐变和径向渐变：

Background-image：linear-gradient（）是线性渐变，它里面有三个参数：

Background-image：radial-gradient（）是径向渐变，它参数有四个：

Transition是过分的意思，以前咱们一直用的transition ：all   1s；其中的all它表明多个意思，咱们能够拆成如下几个分属性“

Transition-property：width/height；是指过分的宽高属性。

Transition-duration：；是值过分的时间，也能够理解为动画的执行时间。

Transition-delay：；是指延迟的时间，也能够理解为延迟多久执行动画。

Transition-timing-function：；是指动画播放的效果，好比匀速，加速等等，它有好几种方式分别为：linear，ease，ease-in，ease-out，cubic-bezier，其中最后一个是贝尔曲线，它后面要加值的。

因此transition：也是能够连写的

：

Transform是变换的意思，能够移动，能够旋转，以前咱们用的是二维的，如今更深刻一点，再加个z轴，变成三维的。

它里面有两个属性咱们要注意如下：

Transform-origin：；是改变变换的中心点，能够改成另外任意位置。

Transform-style：preserve-3d；若是有3d效果变换的话，须要为父元素添加这个属性，咱们才能够看到效果。

以前的rotate（），translater（），scale（）都有Z轴的，

这里要注意下，z轴的方向是指向屏幕的，向外指的。

这里设置3d，因此还涉及到一个属性：perspective：px；这里是设置元素距离浏览器的距离，设置的位置是该元素的祖先位置。

Css3中有中图片边框很漂亮的，就是用一张张小图片作成边框，它使用方法是：

Border-image-source：url（）；是图片的路径。

Border-image-slice：l（x，y）；它两个值分别表明是：

Border-image-repeat：；它有两个值round和repeat，他们指的是切割后中间的平铺方式。

以前js里面动画咱们是用定时器作的，这里能够用css3来作，先定义动画：

里面咱们能够只设置from和to，从哪儿开始到哪儿结束，也能够设置中间详细的多处动画，用百分比来设置。