パーツ番号 07-02-12 ・ CSSのみ

ハニカム(六角形)パターン背景

六角形が敷き詰められたハニカムパターンが淡く明滅する背景です。WordPressのテクノロジー系・製造業サイトの整然とした印象づくりに向いています。

css

プレビュー

ソースコード

HTML

<span class="d07-02-12-label">背景サンプル</span>

CSS

.d07-02-12{padding:0;background:#0b1220}
        .d07-02-12-label{position:relative;z-index:2;color:#fff;font-weight:700;letter-spacing:.08em;font-size:15px}
        .d07-02-12::before{content:"";position:absolute;inset:-10px;
          background-image:
            linear-gradient(30deg,rgba(56,189,248,.16) 12%,transparent 12.5%,transparent 87%,rgba(56,189,248,.16) 87.5%,rgba(56,189,248,.16)),
            linear-gradient(150deg,rgba(56,189,248,.16) 12%,transparent 12.5%,transparent 87%,rgba(56,189,248,.16) 87.5%,rgba(56,189,248,.16)),
            linear-gradient(30deg,rgba(56,189,248,.16) 12%,transparent 12.5%,transparent 87%,rgba(56,189,248,.16) 87.5%,rgba(56,189,248,.16)),
            linear-gradient(150deg,rgba(56,189,248,.16) 12%,transparent 12.5%,transparent 87%,rgba(56,189,248,.16) 87.5%,rgba(56,189,248,.16));
          background-size:44px 76px;
          background-position:0 0,0 0,22px 38px,22px 38px;
          animation:d1534pulse 5s ease-in-out infinite}
        @keyframes d1534pulse{0%,100%{opacity:.6}50%{opacity:1}}

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