CSS教學-「CSS3動畫」Ceaser線上動畫產生器

梅問題-《Ceaser》CSS3動畫產生器-即見即所得
  有經驗的朋友都知道,若不透過Flash,想讓網頁產生互動的效果,就得透過jQuery來產生動畫,其實現在只要透過CSS3也可作到相同的效果,無論是區塊的移動、變形、淡入淡出,雖然說透過CSS3來產生動畫可以不用再寫任何的程式碼,但要透過手動key那些動畫的碼,那還真是要命的,最近梅干發現一個好站,直接透過線上拖拉的方式,就可產生出各種的不同的動畫效果,同時還可線上即時預覽,真是簡單又方便,身為網頁設計的你,怎能錯過這個好東西,現在就趕快來看看吧!

CSS3動畫產生器:
網站名稱:Ceaser - CSS Easing Animation Tool
網站網址:http://matthewlein.com/ceaser/

Step1
一進入網站,左邊會看到一個,長的跟PS很像的曲線圖,以及右邊有些控制項目,可即時預覽左邊調整後的數值,所產生的動畫效果。
梅問題-《Ceaser》CSS3動畫產生器-即見即所得
Step2
從右邊的下拉選單中,可選擇內建的動畫範本。
梅問題-《Ceaser》CSS3動畫產生器-即見即所得
Step3
選完後,左邊就會產生出範本的動畫曲線,接著點右邊的LeftWidthHeightOpacity等鈕,就可預覽動畫效果。
梅問題-《Ceaser》CSS3動畫產生器-即見即所得
Step4
若覺得內建效果不喜歡,也可自行調整曲線。
梅問題-《Ceaser》CSS3動畫產生器-即見即所得
Step5
當喜歡此效果時,將頁面向下拉,把下方的語法全部複製起來。
梅問題-《Ceaser》CSS3動畫產生器-即見即所得
Step6
接著把那語法貼到網頁的區塊中,再設定區塊的大小、位置,以及當滑入時所要移動的數值,這樣就大功告成囉!
梅問題-《Ceaser》CSS3動畫產生器-即見即所得
Step7
這時將滑鼠移到梅干身上,區塊就會向右移動囉!可直接點下方的範例預覽,直接預覽結果。
梅問題-《Ceaser》CSS3動畫產生器-即見即所得
[範例預覽]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    辣豆瓣醬 說道:

    不錯的工具,不過透明效果怎麼出不來呢?

    回應:
    可以呀!!