プラスマイナスアイコン(ホバーアニメーション付き)
デモ
CSSコードコピー
※ 当サイトのリセットCSSにはressを使用しています。
コピーする
使い方
span
要素を1つ用意し、class="cca-iconPlus"
を付与してください。
解説
最初に配置・アイコンの大きさを決めます。
テキストが回り込むようにdisplay: inline-block;
を当てておきます。
アイコンの表示要素は絶対配置にするため、position: relative;
を当てておきます。
プラスの棒をbefore
とafter
で表現します。
横幅いっぱいの長さ、高さは0、top: 50%;
で中央配置にします。
棒はborder-bottom
で表現します。
ホバー時にアニメーションさせるため、transition
プロパティを設定します。
3つの値を指定しており、左からアニメーション対象プロパティtransform
、アニメーション時間300ms
、緩急ease-out
です。
before
とafter
で用意した2本の棒のうち1本をtransform: rotate(90deg);
で縦向きにします。
横棒とアニメーションを少し変化させます。
transition-delay
でアニメーション開始までの遅延時間を設定、transition-duration
でアニメーション時間を上書きしています。
ホバー時に回転の角度を揃えることで1本の線に見せます。
ヘルプ・コンタクト
機能に関するご質問は、このページの下部に表示されている Twitter
のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM
等でご連絡ください。