プラスマイナスアイコン(ホバーアニメーション付き)
デモ
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
等でご連絡ください。