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

波紋ロケーションマーカー

現在地ピンから波紋が絶えず広がります。店舗の位置を目立たせたいアクセス案内に最適。

mapcss

プレビュー

ソースコード

HTML

<div class="d10-04-02-map">
          <span class="d10-04-02-grid"></span>
          <div class="d10-04-02-loc">
            <span class="d10-04-02-ring"></span>
            <span class="d10-04-02-ring d10-04-02-ring2"></span>
            <span class="d10-04-02-dot"></span>
          </div>
        </div>

CSS

.d10-04-02{padding:0}
        .d10-04-02-map{position:absolute;inset:0;background:#e9eef1;overflow:hidden}
        .d10-04-02-grid{position:absolute;inset:0;background-image:linear-gradient(#d3dbe0 1px,transparent 1px),linear-gradient(90deg,#d3dbe0 1px,transparent 1px);background-size:40px 40px}
        .d10-04-02-loc{position:absolute;left:50%;top:50%;width:0;height:0}
        .d10-04-02-dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;background:#2f7fef;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.25)}
        .d10-04-02-ring{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border:2px solid #2f7fef;border-radius:50%;transform:scale(1);opacity:.7;animation:d282ripple 2.4s ease-out infinite}
        .d10-04-02-ring2{animation-delay:1.2s}
        @keyframes d282ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(7);opacity:0}}

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