CSS教學－「CSS3動畫」Ceaser線上動畫產生器:－2016 台北日本料理推薦 , 台北日本料理吃到飽 , 台北日本料理名店 , 台北日本料理吃到飽推薦 , 台北日本料理推薦2014

Blogtrottr

♣梅問題‧教學網【Minwt】♣

May 29th 2013, 01:30

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

CSS3動畫產生器：

網站名稱：Ceaser - CSS Easing Animation Tool
網站網址：http://matthewlein.com/ceaser/

Step1
一進入網站，左邊會看到一個，長的跟PS很像的曲線圖，以及右邊有些控制項目，可即時預覽左邊調整後的數值，所產生的動畫效果。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得

Step2
從右邊的下拉選單中，可選擇內建的動畫範本。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得

Step3
選完後，左邊就會產生出範本的動畫曲線，接著點右邊的Left、Width、Height、Opacity等鈕，就可預覽動畫效果。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得

Step4
若覺得內建效果不喜歡，也可自行調整曲線。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得

Step5
當喜歡此效果時，將頁面向下拉，把下方的語法全部複製起來。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得

Step6
接著把那語法貼到網頁的區塊中，再設定區塊的大小、位置，以及當滑入時所要移動的數值，這樣就大功告成囉!
梅問題－《Ceaser》CSS3動畫產生器-即見即所得

Step7
這時將滑鼠移到梅干身上，區塊就會向右移動囉!可直接點下方的範例預覽，直接預覽結果。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得

[範例預覽]

分享給更多朋友 分享

延伸閱讀:

《MinifyMe》橫跨 Win / MAC 平台CSS壓縮軟體

《Cyotek Spriter》將多張小圖合併成一張，並產生CSS碼

《Easy CSS Menu》網站下拉選單自動產生器

CSS教學－讓文字在網頁也能顯示上、下標文字

CSS教學－CSS3 瀑布流版型 column-count

標籤： css3動畫, css3動畫產生器, css3工具
引用網址： ※如有發現掉圖或檔案無法下載，請由回應區留言告知，將會盡速處理！謝謝。
※本站採用CC授權請勿全文轉貼本站文章，歡迎「部份引用」與介紹，並註明出處，謝謝。

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: 'You Say What You Like, Because They Like What You Say' - http://www.medialens.org/index.php/alerts/alert-archive/alerts-2013/731-you-say-what-you-like-because-they-like-what-you-say.html

You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions