之前在一些網站發現了一個好玩的樣式,就是鼠標移到網站LOGO上,logo會自動抖動起來,顯得非常炫酷。我也是十分感興趣。自從本站新添加了一個視覺設計的分類之后,我也是想起來有個抖動CSS樣式CSS Shake,所以今天給小伙伴們分享一下,希望小伙伴們能夠喜歡。
CSS Shake是一個使用CSS3實現的動畫樣式,使用SASS編寫,利用它我們可以實現多種不同樣式的抖動效果。比如自動抖動、鼠標懸停抖動、鼠標劃過抖動。這個效果很好玩,可以用到logo、圖標、按鈕或者標題上面,顯得很酷炫。廢話不多說,直接上圖:
如何在網頁中調用呢?當然不是簡簡單單幾個代碼就能搞定,需要調用CSS Shake代碼文件。
?/* 引入css shake的樣式表,樣式表可以下載到你的網站目錄里調用哦?*/
/* 添加抖動樣式,一共9種,如下?*/
另外還能通過 .freeze,.shake-constant & .hover-stop 來控制狀態,自己百度一下哦。
最后,醉風云希望結識一些喜歡視覺設計的朋友,感興趣的+洃少QQ哦!