動來動去!有趣的CSS抖動效果 – CSS Shake

css-shake-demo1

這是一個很微小的動畫,但使用得當也是挺不錯的,比如用在廣告、圖像、按鈕上,這樣可以用來吸引用戶眼球從而促使去點擊它,想偷點懶的設計師們也可以使用這套CSS直接套用class做出不錯的效果,哈。

CSS Shake是一個使用CSS3實現的動畫樣式,使用SASS編寫,利用它我們可以實現多種抖動效果(如下面的GIF圖像),共有9個抖動樣式,三個狀態,如鼠標經過拉動、無限抖動、鼠標懸停拉動,下面一起來看看介紹:

css-shake-demo1

css-shake-demo2

css-shake-demo3

如何在我的網頁上使用它?

很簡單,按照以下步驟不用30秒就可完成!

1. 首先把css shake的樣式表文件放到head裡

<link type="text/css" href="csshake.css">



2. 給你的 HTML DOM 元素添加shake class樣式
<div class="shake"></div>


3. 自行選擇添加抖動樣式,一共9種,也可以看DEMO對應添加即可
<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>

 

 

還可用 .shake-constant & .hover-stop 來控制狀態,下載來玩玩看吧!

 

DEMO

下載 : http://elrumordelaluz.github.io/csshake/css/csshake.min.css  、 Github

 

 

如果覺得DesignRock文章不錯的話,請分享給你身邊的朋友們喔,謝謝!

 

 

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s