css3 實現動畫,變換基點及3D效果~

各位小伙伴

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

動畫效果

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

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

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

首先來做一下準備工作

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

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

第一種動畫方式

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效果是最好的。

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

今天就先到這了

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

期待一下吧~

拜拜~


?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,198評論 4 61
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,067評論 25 708
  • 為了慶祝爽老師和夏綠蒂的高考教學沖刺結束,趕在成績出來之前走了趟廣西賀州,正好完美避開了雨天和旅游旺季,...
    Z_Min閱讀 1,073評論 4 1
  • 一個學生問老師說:“正義一定會戰勝邪惡嗎?”老師回道:“是的,邪不壓正是客觀規律。”學生迷惑地問:“您能具體說說嗎...
    海王星1984閱讀 437評論 2 0
  • 憤怒 減肥藥:愛吃肉,但不代表愛長肉 懶惰 睡眠面膜:越睡,越美 貪婪 電熱鍋:一鍋六用 省心省錢省空間 色欲 手...
    4fa3a615b8b6閱讀 248評論 3 0