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，從哪兒開始到哪兒結束，也能夠設置中間詳細的多處動畫，用百分比來設置。