• 別人網站上看到鼠標經過圖片左右抖動晃動的特效,自己也想弄一個,查了查是用到的就是CSS3的特性——Shake

• Shake使用SASS編寫，利用它我們可以實現多種不同樣式的抖動效果。這是一個很微小的動畫，但使用得當也是挺不錯的，比如用在廣告、圖像、按鈕上，這樣可以用來吸引用戶眼球從而促使去點擊它。

• 這個Csshake有9個抖動樣式，三個狀態，如鼠標經過拉動、無限抖動、鼠標懸停拉動，一起來看一下吧。 實現方法也很簡單，因為已經有了做好的CSS代碼，我們只需要引入文件在需要抖動的地方調用即可。

• 1.下載CSS shake樣式表

鏈接: https://pan.baidu.com/s/1nuLaitN 密碼: 7ewr

• 2.引入CSS shake樣式表

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

• 3.在需要抖動的元素塊中加入shake的class屬性

抖動樣式一共有九種自己選擇喜歡的試試吧：<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> //瘋狂抖動

總結

以上是生活随笔為你收集整理的鼠标滑过图片抖动晃动效果（css/Shake）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。