Easing函數


你是個前端設計師嗎?承認吧你就是要與一些語法的東西為伍。

俄羅斯一個高手把Easing函數全部都做成了開源範例,並且提供js、css、scss的語法讓你可以直接取用,真好這下子專業性直接提高一個擋次。

網址:http://easings.net/zh-tw
作者:https://github.com/ai

使用方式:
  1. 直接選擇一個曲線進入內容,可以看到動態線條與動態,如果想再看一次,直接點選該曲線圖即可。
  2. 然後下面就是可用的函式了,部份相關支援性也會有相對應的說明。

cubic-bezier,CSS動態編輯器


你經常需要使用CSS編程嗎?
http://cubic-bezier.com 這個工具網站可以協助你編譯最適合的動態預覽,直接輸出成CSS語法。

立刻看看這是什麼請直接按GO。

使用方式:
  1. 直接在網頁上編輯,首先拉動曲線,其次調整一個做動時間,例如設定動態時間為0.5表示0.5秒,然後按下GO就可以預覽。
  2. 按IMPORT輸入你自己的語法,再依樣進行編輯調整。
然後按EXPORT就可以得到語法了。