CSS 動態視覺狂想曲

本頁最佳體驗，建議使用 firefox 系列, google chrome, IE 10 等瀏覽器。

互動變換效果 (鼠標可移入照片；可縮放視窗檢視)

範例僅用到一幀原始照片，不需繪圖軟體的特效製作。更新日期：

使用技術： css3 transition, css3 gradient, html5 SVG

  1. 「心」「平」氣和
  2. 「心」「平」氣和
  3. 「心」「平」氣和
  4. 「心」「平」氣和

3D 迴旋動畫效果 (鼠標可移入照片)

範例中，個別單項僅用到一幀照片。更新日期：

使用技術： css3 transition, css3 gradient, css3 transform 3D

3D 動畫：環場透視效果。

Flash? 哦，不！單純只有用到 CSS。更新日期：

使用技術： css3 animation, css3 transform 3D

動態變換圖片 (鼠標可移入照片)

還在用落後又效率差的滑鼠變換影像 javascript 做效果？更新日期：

使用技術： css3 transition, css3 background-image

定格動畫 - stop motion animation (鼠標可移入照片)

256 色 gif 動畫？遜掉嘍。用支援半透明及全彩的 png 圖，酷！更新日期：

使用技術： css3 animation, css3 transition, css3 background-image, css text-indent

按鈕、徽章 (鼠標可移入)

做圖、補間動畫變換？那～麼麻煩……不必了，都不用。更新日期：

使用技術： css3 animation, css3 transition, css3 box-shadow, css3 gradient, css3 border-radius

svg mask, 造型遮板 designed by 不惑仔

google 論壇

css animation art (groups.google.com/group/css-animation-art/)