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

エリアハイライト（対応地域）

抽象地図上で対応エリアの区画がふわっと色づきます。表示時に再生。配達・出張対応地域の案内に。

mapscrollcss

プレビュー

ソースコード

HTML

<div class="d10-04-08-map">
          <span class="d10-04-08-grid"></span>
          <span class="d10-04-08-area d10-04-08-a1"></span>
          <span class="d10-04-08-area d10-04-08-a2"></span>
          <span class="d10-04-08-area d10-04-08-a3"></span>
        </div>
        <span class="d10-04-08-label">対応エリア</span>

CSS

.d10-04-08{padding:0}
        .d10-04-08-map{position:absolute;inset:0;background:#eaeef0;overflow:hidden}
        .d10-04-08-grid{position:absolute;inset:0;background-image:linear-gradient(#dbe1e5 1px,transparent 1px),linear-gradient(90deg,#dbe1e5 1px,transparent 1px);background-size:36px 36px}
        .d10-04-08-area{position:absolute;background:#2f7fef;border-radius:8px;opacity:0;transform:scale(.9)}
        .d10-04-08-a1{left:10%;top:16%;width:34%;height:34%}
        .d10-04-08-a2{right:12%;top:24%;width:28%;height:40%}
        .d10-04-08-a3{left:30%;bottom:12%;width:36%;height:28%}
        .io-reveal.is-visible .d10-04-08-a1{animation:d288in .7s ease .05s forwards}
        .io-reveal.is-visible .d10-04-08-a2{animation:d288in .7s ease .25s forwards}
        .io-reveal.is-visible .d10-04-08-a3{animation:d288in .7s ease .45s forwards}
        .d10-04-08-label{position:absolute;left:16px;top:14px;background:#fff;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:700;color:#2f7fef;box-shadow:0 2px 8px rgba(0,0,0,.1)}
        @keyframes d288in{to{opacity:.32;transform:scale(1)}}

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