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

コンテンツ区切り装飾

ドット・アスタリスク・波線の3種の記事セクション区切り。アスタリスクは軽く点滅します。WordPress記事の話題転換の仕切りに。装飾の一部が動作します。

blogautocss

プレビュー

ソースコード

HTML

<div class="d06-02-10-set">
          <div class="d06-02-10-dots"><span></span><span></span><span></span></div>
          <div class="d06-02-10-star">✳&nbsp;&nbsp;✳&nbsp;&nbsp;✳</div>
          <div class="d06-02-10-wave"><svg viewBox="0 0 120 12" preserveAspectRatio="none" width="180" height="12"><path d="M0 6 Q10 0 20 6 T40 6 T60 6 T80 6 T100 6 T120 6" fill="none" stroke="#c9a0ff" stroke-width="2"/></svg></div>
        </div>

CSS

.prev.d06-02-10{background:#fbfbfe}
        .d06-02-10-set{display:flex;flex-direction:column;gap:34px;align-items:center}
        .d06-02-10-dots{display:flex;gap:12px}
        .d06-02-10-dots span{width:8px;height:8px;border-radius:50%;background:#c3c8dc}
        .d06-02-10-dots span:nth-child(2){background:#5b3df0}
        .d06-02-10-star{letter-spacing:4px;color:#e04b8a;font-size:16px;animation:d06-02-10-tw 2.4s ease-in-out infinite}
        @keyframes d06-02-10-tw{0%,100%{opacity:.4}50%{opacity:1}}
        .d06-02-10-wave{line-height:0}

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