Route Arrow Trace
折れ曲がったSVGルートの線をホバーで描き、終点の矢印を前進させる。
PRACTICAL WEB TIPS
Hover Effects
実際に動くWeb制作素材。プレビューで試して、HTML・CSSコードを確認できます。
使用対象から探す
ボタン・テキスト・画像など、実際に使う場所で分類しています。
適用中：使用対象: icon-arrow ／ 用途: navigation
11 items条件に一致する公開素材
Folded Route Glyph
紙を折るようなSVGアイコンがホバーで開き、進む方向を示す矢印に変わるミニアイコン。
Expand-to-Label Icon
アイコンのみのコンパクトな操作ボタンがホバーで横に伸び、操作名を表示する省スペース表現。
Stack Fan Icon
重なった3枚のダイヤ形レイヤーがホバーで扇状に広がり、素材レイヤー切替を示すアイコン。
Arrow Turnstile Icon
アイコン内のカーブ矢印がホバーで直進矢印に変化する、外部ページ遷移用の小型リンク。
Plus to Four Points
展開ボタンのプラス記号がホバーで4つの点へ分かれ、メニューの開閉を視覚的に示す。
Icon Compass Focus
コンパス型SVGの外周目盛りがホバーで回転し、中央矢印だけが方向を示すアイコンリンク。
Elastic Chevron
小さな矢印が伸び縮みして前進する、案内リンク向けのマイクロアニメーション。
Arrow Pass Through
丸い矢印アイコンが一度外へ抜け、反対側から現れるCTA演出。
Icon Quarter Turn
矢印アイコンを円形の中で90度回転させ、方向転換を示す演出。
Arrow Motion
文字は固定し、矢印だけ動かす。情報設計上の意味が明確な演出です。