パーツ番号 09-03-07 ・ CSSのみ

403権限なし

南京錠のSVGと「403」「アクセス権限がありません」を表示する権限エラー画面。WordPressの会員限定ページや管理エリアへの不正アクセス時に表示する 403 画面に使えます。

csssvg

プレビュー

ソースコード

HTML

<div class="d09-03-07-wrap">
          <svg class="d09-03-07-lock" viewBox="0 0 64 72" width="60" height="68" aria-hidden="true">
            <path d="M18 32V22a14 14 0 0128 0v10" fill="none" stroke="#8a90a8" stroke-width="5" class="d09-03-07-shackle"/>
            <rect x="12" y="32" width="40" height="32" rx="6" fill="#3a4160"/>
            <circle cx="32" cy="46" r="4.5" fill="#f4c257"/>
            <rect x="30" y="48" width="4" height="9" rx="2" fill="#f4c257"/>
          </svg>
          <p class="d09-03-07-num">403</p>
          <p class="d09-03-07-msg">アクセス権限がありません</p>
        </div>

CSS

.d09-03-07{background:#f4f5f9}
        .d09-03-07-wrap{text-align:center}
        .d09-03-07-shackle{stroke-dasharray:90;stroke-dashoffset:90;animation:d327draw 1.6s ease forwards}
        @keyframes d327draw{to{stroke-dashoffset:0}}
        .d09-03-07-num{margin:10px 0 2px;font-size:26px;font-weight:800;color:#3a4160;letter-spacing:.08em}
        .d09-03-07-msg{color:#7a819e;font-size:13px}

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