パーツ番号 10-04-06 ・ CSSのみ

方向・ルート矢印

駅から店舗までの順路を流れる点線と矢印で示します。徒歩ルート案内の見出しに動きを添えます。

mapautocss

プレビュー

ソースコード

HTML

<div class="d10-04-06-map">
          <span class="d10-04-06-grid"></span>
          <span class="d10-04-06-start">駅</span>
          <span class="d10-04-06-goal">店</span>
          <span class="d10-04-06-route"></span>
          <span class="d10-04-06-arrow"></span>
        </div>

CSS

.d10-04-06{padding:0}
        .d10-04-06-map{position:absolute;inset:0;background:#eaeef0;overflow:hidden}
        .d10-04-06-grid{position:absolute;inset:0;background-image:linear-gradient(#dbe1e5 1px,transparent 1px),linear-gradient(90deg,#dbe1e5 1px,transparent 1px);background-size:32px 32px}
        .d10-04-06-start,.d10-04-06-goal{position:absolute;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
        .d10-04-06-start{left:16%;top:30%;background:#5a6b7a}
        .d10-04-06-goal{right:16%;bottom:26%;background:#e2504a}
        .d10-04-06-route{position:absolute;left:24%;top:42%;width:48%;height:3px;background:repeating-linear-gradient(90deg,#2f7fef 0,#2f7fef 8px,transparent 8px,transparent 16px);transform:rotate(22deg);background-size:16px 3px;animation:d286flow 1s linear infinite}
        .d10-04-06-arrow{position:absolute;right:26%;bottom:30%;width:0;height:0;border-left:12px solid #2f7fef;border-top:7px solid transparent;border-bottom:7px solid transparent;transform:rotate(46deg)}
        @keyframes d286flow{to{background-position:16px 0}}

クラス名 .d10-04-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。