星は <i> 1つで1個です。--x --y が位置(%)、--s が大きさ、--d が光り始めるまでの時間です。行を足すと星が増えます。
SPARKLE
きらきら・光のCSSアニメーション素材
お祝い・キャンペーン・新着などを華やかにする、きらきらした演出です。光の数や位置は、HTMLの行を足したり消したりして調整できます。
11種類
金色のグラデーションの上を、白い光の筋がときどき通ります。--cs-cycle で光る間隔を変えられます。
紙吹雪は <i> 1つで1枚です。--x が横の位置、--d が落ち始め、--t が落ちる時間です。色は4色を順番に使います。
暗い背景の帯に、ぼんやり光る粒が下からゆっくりのぼります。粒の数は <i> の行で増減できます。
雪は落ちる動き(<i>)と左右にゆれる動き(中の疑似要素)を分けているので、ふわふわ落ちます。季節のお知らせ帯などに。
マウスを乗せると、ボタンのまわりへ小さな星が広がります。星の飛ぶ先は --tx --ty で決めています。
小さな星は背景の点で、流れ星は <i> 1つで1本です。--d をずらすと流れるタイミングが変わります。
シャボン玉は虹色のふちと白い映り込みを重ねて描いています。--s が大きさ、--x が横の位置です。
細かい点を何層も重ねた模様を、文字の形で切り抜いています。模様がゆっくり動いて、ラメのようにちらちら光ります。
押すとハートが6つ浮かんで消えます。もう一度押すと元に戻ります(aria-pressed で状態を伝えます)。数は i < 6 で変えられます。
放射状の光の筋を、ふちをぼかしてゆっくり回しています。当選・お祝い・ランキング1位などの演出に。