パーツ番号 09-01-10 ・ CSSのみ

キラキラNEWバッジ

NEWバッジの周りで星が順番に瞬く華やかな装飾。新着記事やキャンペーンの注目ラベルとして目を引く演出に使えます。

css

プレビュー

ソースコード

HTML

<div class="d09-01-10-wrap">
          <span class="d09-01-10-new">NEW</span>
          <span class="d09-01-10-star d09-01-10-s1"></span>
          <span class="d09-01-10-star d09-01-10-s2"></span>
          <span class="d09-01-10-star d09-01-10-s3"></span>
          <span class="d09-01-10-star d09-01-10-s4"></span>
        </div>

CSS

.d09-01-10-wrap{position:relative;padding:20px}
        .d09-01-10-new{display:inline-block;background:linear-gradient(135deg,#f472b6,#ec4899);color:#fff;font-size:15px;font-weight:800;letter-spacing:1px;padding:8px 18px;border-radius:8px;box-shadow:0 4px 12px rgba(236,72,153,.4)}
        .d09-01-10-star{position:absolute;width:10px;height:10px;background:#fde047;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:0}
        .d09-01-10-s1{top:2px;left:6px;animation:d09-01-10-tw 1.8s ease-in-out infinite}
        .d09-01-10-s2{top:0;right:10px;animation:d09-01-10-tw 1.8s ease-in-out .45s infinite}
        .d09-01-10-s3{bottom:2px;left:18px;animation:d09-01-10-tw 1.8s ease-in-out .9s infinite}
        .d09-01-10-s4{bottom:0;right:4px;animation:d09-01-10-tw 1.8s ease-in-out 1.35s infinite}
        @keyframes d09-01-10-tw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

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