各位小伙伴

上次分享的愛心感覺如何呀~

動畫效果

首先，娜娜在這邊給大家認個錯，上次分享落下了一個東西，就是動畫效果，沒有動畫是實現不了愛心一條一條的動作的。

雖然那個愛心源代碼已經給大家了，只要復制就有效果，但是娜娜還是希望大家可以明白，每段代碼起到的作用，可以按照自己想法來修改代碼~

那讓我們一起來看看動畫效果吧！

首先來做一下準備工作

我們現在要做的就是，讓這個小方塊按照箭頭的方向走一圈。

那么現在開始吧！首先要定義一下動畫的名稱，注意的是動畫的名稱不是固定的你喜歡什么名稱，就用什么名稱就好。名稱起好了，我們下面設置樣式。

第一種動畫方式

0~25%表示方塊從左上移動到右上方，

25%~50%表示方塊從右上移動到右下方，

50%~75%表示方塊從右下方移動到左下方，

75%~0表示方塊回到初始位置。

在 0~100% 之間設置動作時，起始狀態可以不寫，結束動作也可以不寫默認回到起始點（圖片上0%的部分），中間數值也是可以自由分配的不一定非得像我這樣 25%、50%、75%這樣分配。

現在調用這個動畫，設置調用動畫的名稱，以及全過程所需要的時間。

運動效果：

除了上述的兩中屬性，還有其他屬性可以設置，

animation-delay:?設置動畫延遲，設置經過多少時間才開始運動，

animation-timing-function:?設置動畫運動速度的曲線，下面有一些選項

linear:?勻速

ease：默認。動畫以低速開始，然后加快，在結束前變慢。

ease-in：動畫以低速開始。

ease-out：動畫以低速結束。

animation-iteration-count:?播放次數，可以給次數，沒有單位，infinite 無限循環，默認執行一次

animation-direction:?是否反向播放動畫，alternate反向播放動畫默認是normal 不會反向播放。

給大家演示一下反向播放：

除了上面的這些屬性，還有一條屬性?animation-play-state 控制動畫的狀態

paused ?暫停

running?播放

這兩條語句的意思就是：

第一個p標簽中的方塊，鼠標放上去，就不會運動了

第二個p標簽，鼠標放上去，小方塊才會運動

這個就不給大家演示了哈~。

第二種方式：

這種方式，就沒有第一種那么多變，很簡單就是：

from~to 從哪來~到哪去~

下面試動畫屬性的復合寫法：順序

animation: name ?duration delay ?timing-function iteration-count ?direction;

看一下效果：

變換基點

先來做一下準備工作：

上面都是些基礎的屬性，就不解釋了哈~現在我們來給它一個動畫效果：

這個我們上次有說，就是旋轉45deg的意思。

我們可以看見方塊一的旋轉動作是繞著它的中心點來進行旋轉動作的。接下來我們介紹的就是改變它的旋轉基點~

transform-origin?變換基點:?

即變換參考點，默認是絕對中心點，也就是center center ，相當于把釘子定在哪一個點這一個點就需要坐標去固定。所以，就有兩個值。

第一個值x軸，第二個值y軸，并且兩個值之間以空格隔開。

當只有一個值的時候如果是方向值（如 top），另外一個值默認為 center，如果是固定的值（如 30px）,那么這一個值就是 x 軸的值，另外一個是 y 軸默認為 50%；可以為負值（相當于超出盒子以外去了）。

下面給大家演示各種基點的情況：

3D效果

實現 3D 效果需要一個3D的環境。

景深：

使具有三維變換的元素產生透視效果，值越大看起來距離自己就越近，元素就越大。值越小，越遠，元素越小。

通常我們使用800px或者1200px ,因為這兩個做3D效果是最好的。

怎么樣是不是有那么點立體的感覺~

今天就先到這了

明天給大家做一個好玩的東西

期待一下吧~

拜拜~