1. 程式人生 > >滑鼠滑過圖片抖動晃動效果(css/Shake)

滑鼠滑過圖片抖動晃動效果(css/Shake)

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

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

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

  • 1.下載CSS shake樣式表

連結: https://pan.baidu.com/s/1nuLaitN 密碼: 7
ewr
  • 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> //瘋狂抖動