使用csshake怎么實現(xiàn)多種不同樣式的抖動效果

發(fā)布時間：2021-07-27 18:18:09 來源：億速云閱讀：152 作者：Leah 欄目：開發(fā)技術(shù)

使用csshake怎么實現(xiàn)多種不同樣式的抖動效果，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

　　cssShake是一個使用css3實現(xiàn)的動畫樣式，使用SASS編寫，利用它我們可以實現(xiàn)多種不同樣式的抖動效果（如下面的GIF圖像）。

　　cssShake是什么

　　cssShake是一個很微小的動畫，但使用得當(dāng)也是挺不錯的，比如用在廣告、圖像、按鈕上，這樣可以用來吸引用戶眼球從而促使去點擊它。這個csshake有9個抖動樣式，三個狀態(tài)，如鼠標經(jīng)過拉動、無限抖動、鼠標懸停拉動

　　cssShake使用教程

　　首先引入cssshake的樣式表文件。

　　<linktype="text/css"href="csshake.css">

　　給你的DOM元素添加shakeclass樣式

　　<divclass="shake"></div>

　　添加抖動樣式，一共9種，也可以看DEMO對應(yīng)添加即可

　　<divclass="shakeshake-hard"></div>

　　<divclass="shakeshake-slow"></div>

　　<divclass="shakeshake-little"></div>

　　<divclass="shakeshake-horizontal"></div>

　　<divclass="shakeshake.vertical"></div>

　　<divclass="shakeshake-rotate"></div>

　　<divclass="shakeshake-opacity"></div>

　　<divclass="shakeshake-crazy"></div>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細節(jié)

猜你喜歡