CSS3 を解析する Shake Shake style_html/css_WEB-ITnose

フロントエンドでプロジェクトに取り組んでいるときに、シェイク ボタンが非常に目を引くことに気づき、実装原理を研究したので共有します。

CSS Shake は、次を使用して実装されたアニメーション スタイルです。 CSS3 であり、SASS で記述されています。これを使用すると、さまざまなスタイルのディザリング効果を実現できます (下の GIF 画像など)。これは非常に小さなアニメーションですが、広告、画像、ボタンなどで適切に使用すると、ユーザーの注意を引き、クリックを促すのに最適です。

先輩の 1 人が全員のために csshake.css を作成しました。参考にしてください: http://www.webhek.com/misc/css-shake

Csshake には 9 つのシェイク スタイルと 3 つの状態 (マウス After など) があります。引っ張る、無限に振る、マウスホバリングの紹介を見てみましょう:

使い方チュートリアル

まず、CSS シェイクのスタイルシートファイルを紹介します。 rreee rreee dom rreee shake class your dom Elementionのシェイクラリーシェイクスタイル、合計9つのタイプがあります。また、それに応じて追加するデモを見ることができます。