Hover.css コードジェネレータ アニメーション
Hover.css はホバー (マウスを乗せた時) のエフェクト専門のCSSライブラリです。ボタン・カードへの「触れる楽しさ」を加えるエフェクトが40種類以上揃っています。本ツールでマウスを乗せて動きを確認しながらクラス名を選択できます。
使い方
- 下部の40種類以上のホバーエフェクトからクリックで選択
- プレビュー領域のボタンまたはボックスにマウスを乗せて動作確認
- コピーボタンでHTMLコードを取得 (CDN読み込み+クラス付与例)
Hover.css の導入方法
生成したコードを使うには、Hover.css ライブラリをCDN等で読み込みます:
<!-- HTMLのheadに追加 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css"> <!-- ボタン等に hvr- で始まるクラスを追加 --> <a class="hvr-grow" href="#">マウスを乗せると拡大</a>
Hover.css の特徴
- ホバー専門: ボタン・カード・画像のホバー演出に特化
- JavaScript不要: 純CSS実装
- 豊富なパターン: 150種類以上のエフェクト内蔵
- 無料・MITライセンス: 商用利用も自由
- 軽量: minifiedで約60KB