回転ポップ装飾アイコン
カードのコーナーに貼る、回り続けるスタンプ風バッジです。 .rp__badge を position:absolute で右上に出っ張らせ（ top:-12px;right:-12px ）、 border:3px dashed と outline の二重枠でチケットのような切り取り感を演出。
解説
カードのコーナーに貼る、回り続けるスタンプ風バッジです。.rp__badge を position:absolute で右上に出っ張らせ（top:-12px;right:-12px）、border:3px dashed と outline の二重枠でチケットのような切り取り感を演出。@keyframes rpSpin による rotate(360deg) の等速回転でゆっくり回り続けます。丸い形は border-radius:50%、文字は display:grid;place-items:center で中央寄せ。CSS だけで完結します。
使う場面
- 新着を示す「NEW」ラベル
- セールやキャンペーンの訴求バッジ
- おすすめ商品やピックアップ記事の目印
文言はテキストを書き換えるだけ、色は背景 #f5576c と outline を揃えて変更します。回転速度は rpSpin 8s を増減し、回転を止めてホバー時だけ弾ませたい場合は :hover に transform:scale() を当てる構成にも展開できます。常時回転は視線を引きすぎることがあるため、1 画面に複数個は置かず主役の 1 箇所に絞るのがおすすめです。
使用例・適したシーン
- カード装飾
- 見出し下線
- ホバー強調
よくある質問
回転を止めて使えますか?
使えます。.rp__badge の animation 指定を外せば静止したバッジになります。動きを残したい場合は :hover のときだけ回したり弾ませる書き方もできます。
バッジの位置はずらせますか?
ずらせます。top と right の数値を変えると出っ張り具合が変わり、left や bottom に置き換えれば左上や下のコーナーにも配置できます。