炫酷的CSS3抖動樣式:CSS Shake

標籤：blog   http   io   ar   os   使用   sp   檔案   div   

CSS Shake是一個使用CSS3實現的動畫樣式，使用SASS編寫，利用它我們可以實現多種不同樣式的抖動效果（如下面的GIF映像）：

炫酷的CSS3抖動樣式:CSS Shake

這是一個很微小的動畫，但使用得當也是挺不錯的，比如用在廣告、映像、按鈕上，這樣可以用來吸引使用者眼球從而促使去點擊它。

這個Csshake有9個抖動樣式，三個狀態，如滑鼠經過拉動、無限抖動、滑鼠移至上方拉動。

CSS Shake 使用方法：

首先引入css shake的樣式表檔案。
css3按鈕：?http://www.huiyi8.com/css3/anniu/
給你的DOM元素添加shake class樣式。抖動樣式，一共9種，可以看Demo的效果對應添加你想要的css。

另外我還能通過 .freeze, .shake-constant & .hover-stop 來控制狀態，大家可以試試看效果！

附註：Sass是一款前端CSS架構，它擴充了CSS3，增加了規則、變數、混入、選取器、繼承等等特性。SASS是一種CSS的開發工具，產生良好格式化的CSS代碼，並且還提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。SASS是Ruby語言寫的，但是兩者的文法沒有關係。不懂Ruby，照樣使用。只是必須先安裝Ruby，然後再安裝SASS。

demo請看：http://elrumordelaluz.github.io/csshake/

1. [圖片] css-shake-demo.gif    

2. [代碼]首先引入css shake的樣式表檔案。     
<link type="text/css" href="csshake.css">
3. [代碼]抖動樣式     
<div class="shake"></div>
<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake.vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<div class="shake shake-crazy"></div>

炫酷的CSS3抖動樣式:CSS Shake