ホバー時にアイコンが動く!様々な種類のCSSアニメーションを簡単に設定しよう

Pocket

マウスホバー時にプルプルとアイコンが動くとなんか心地いいですよね?

そんなリズミカルな動きに穏やかな心地よさを感じるのは僕だけかもしれませんが、心地よかったので以下のようなボタンアイコンを作ってみました。

以下よりアイコンとアニメーションの設定、CSSの取得が可能です。

 

使い方

アニメーションの設定方法

画面右側のコントローラーより「アニメーションの種類」を選択します。

選択後、ボタンにマウスカーソルを重ねると動きを確認できます。

CDNの設定

「HTML・CSS」タブをクリックし、WordPressの場合は以下のCDNをheadタグ内に、貼り付けて保存してください。

 

アイコンとホバー時アニメーションは以下のスタイルシートを使用しています。

Fontawesome5

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />

FontAwesome

Fontawesome Animation

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css" />

FontawesomeAnimation

その他の設定

その他アイコンやHTML・CSSのコピー方法については以下のリンクを参照してください。

 

複数のアイコンを横並びに表示する

 

上記のように複数のアイコンを横並びに表示するためのHTMLとCSSです。
HTML
<a href="#" class="btn-icon-animation btn-share-64 faa-parent animated-hover">
    <i class="fab fa-twitter faa-ring"></i>
</a>
<a href="#" class="btn-icon-animation btn-share-66 faa-parent animated-hover">
    <i class="fab fa-facebook faa-tada"></i>
</a>
<a href="#" class="btn-icon-animation btn-share-67 faa-parent animated-hover">
    <i class="fab fa-get-pocket faa-flash"></i>
</a>
<a href="#" class="btn-icon-animation btn-share-74 faa-parent animated-hover">
    <i class="fab fa-line faa-wrench"></i>
</a>
<a href="#" class="btn-icon-animation btn-share-72 faa-parent animated-hover">
    <i class="fab fa-pinterest faa-pulse"></i>
</a>
CSS
a.btn-icon-animation {
  display: inline-block;
  text-decoration: none;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin:2px;
  font-size: 25px;
  color:#ffffff;
  border-radius: 8px;
  text-align: center;
  overflow: hidden;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
}
a.btn-share-64{
  background: #22b8ff;
}
a.btn-share-66{
  background: #4267b2;
}
a.btn-share-67{
  background: #ef3f56;
}
a.btn-share-74{
  background: #41C106;
}
a.btn-share-72{
  background: #BD081C;
}

上記赤枠の「a.btn-icon-animation」クラスは各ボタンの共通クラスです。共通クラス設定後は背景色を設定するための「a.btn-share-[番号]」クラスのみコピーしてください。

以上がホバー時にアニメーションが設定できるツールの解説でした。

お気に入りのアニメーションを設定して楽しんでみてください。

 

最後まで読んでいただきありがとうございました。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です