CSS ホログラムカード効果9選 — ステッカー・バッジ・チケット

自動再生 · タイルを押すとその項目へ · すべて1つのzip

• 01 カードのホログラムマウスチルト
• 02 ステッカーの角めくれ+ホログラムスイープ
• 03 認証バッジのホログラムリング
• 04 ホログラムテキスト(虹色回転)
• 05 チケット半券のホログラムスタンプ
• 06 正規品認証シール(ギザギザ縁)
• 07 価格タグのホログラムリボン
• 08 アバターのホログラムステータスリング
• 09 ローディングバッジのホログラムシマー

9個は人気順ではなく、ホログラム素材が実際の画面に登場する順番で並べています。まず商品カードがカーソルを追って輝き視線を引きつけ(01)、ステッカーが装飾として貼られ(02)、丸いバッジが信頼を裏づけ(03)、見出しテキストが雰囲気を作った後(04)、チケットが購入を確定し(05)、正規品シールが本物であることを証明し(06)、価格タグのリボンが購入を後押しし(07)、アバターのリングがユーザーの立場を示し(08)、最後にローディングバッジが待ち時間の画面を埋めます(09)。

No	名前	何が動くか	JS
01	カードのホログラムマウスチルト	ハイライト位置、カードのrotateX・rotateY	8行
02	ステッカーの角めくれ+ホログラムスイープ	角のtransform、シートのbackground-position	なし
03	認証バッジのホログラムリング	リングのconic-gradient回転	なし
04	ホログラムテキスト	filter: hue-rotate、background-position	なし
05	チケット半券のホログラムスタンプ	スタンプの回転・scaleパルス	なし
06	正規品認証シール	clip-pathシールの回転速度	なし
07	価格タグのホログラムリボン	リボンのrotate・background-position	なし
08	アバターのホログラムステータスリング	リングのconic-gradient回転	なし
09	ローディングバッジのホログラムシマー	斜めの帯のbackground-position、点のscale	なし

01カードのホログラムマウスチルト

カードにカーソルを乗せると、位置に合わせて虹色のハイライトが表面を走り、カード全体がその方向へわずかに傾きます。限定商品カードや、ポケモンカードのように見せたいグッズ詳細ページに向いています。:hoverだけでは正確なカーソル座標を読み取れないため、pointermoveのわずか8行で--mx・--my・--rx・--ryの4つのカスタムプロパティだけを更新します。

.holo-card {
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform $duration $easing;
}
.holo-card__shine {
  background: conic-gradient(from 0deg, #ff5ecb, #5ef1ff, #a3ff5e, #fff45e, #ff5ecb);
  background-position: var(--mx) var(--my);
  mix-blend-mode: color-dodge;
}

c.addEventListener('pointermove', function(e){
  var r=c.getBoundingClientRect(), mx=(e.clientX-r.left)/r.width*100, my=(e.clientY-r.top)/r.height*100;
  c.style.setProperty('--mx', mx+'%'); c.style.setProperty('--my', my+'%');
  c.style.setProperty('--rx', ((my/100)-.5)*-14+'deg'); c.style.setProperty('--ry', ((mx/100)-.5)*14+'deg');
});

02ステッカーの角めくれ+ホログラムスイープ

ステッカーカードの一角が普段から少しめくれていて、ホバーするとその下を虹色のシートが斜めに走り抜けます。手帳・プランナーステッカーのモックアップや、バッジ型商品ステッカーのプレビューに使えます。

.sticker__peel {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transform-origin: 100% 0;
  transform: rotate(-6deg) translate(2px, -2px);
}
.sticker:hover .sticker__peel {
  transform: rotate(-16deg) translate(6px, -6px);
}
.sticker__shine {
  background: repeating-linear-gradient(115deg, transparent 0 10%,
    #ff5ecb 10% 12%, #5ef1ff 12% 14%, #a3ff5e 14% 16%, #fff45e 16% 18%, transparent 18% 30%);
  background-size: 260% 260%;
}

03認証バッジのホログラムリング

円形バッジの縁を虹色の光が絶え間なく一周します。正規品認証バッジ、認証済み出品者マーク、限定グッズのスタンプに使います。mask-imageでリング状だけを残し、conic-gradientが角度ごとに色を変えるので、本物の箔フィルムの反射に近く見えます。

.v-badge__ring {
  background: conic-gradient(from 0deg, #ff5ecb, #5ef1ff, #a3ff5e, #fff45e, #ff5ecb);
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  animation: ring-spin 2s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

04ホログラムテキスト

文字に虹色グラデーションをかけてfilter: hue-rotateを回し続け、印刷されたホログラムステッカーの文字のように色が絶えず変わります。イベントページのタイトル、限定商品名、ホログラムコンセプトのバナーに向いています。

.holo-text {
  background: linear-gradient(90deg, #ff5ecb, #5ef1ff, #a3ff5e, #fff45e, #ff5ecb);
  background-size: 300% 100%;
  background-clip: text;
  color: transparent;
  animation: holo-hue 2s linear infinite, holo-slide 2s linear infinite;
}
@keyframes holo-hue { to { filter: hue-rotate(360deg); } }
@keyframes holo-slide { to { background-position: 300% 50%; } }

05チケット半券のホログラムスタンプ

チケットの半券に押された丸いスタンプがconic-gradientで静かに回転し、ホバーするとわずかに大きく明るくなります。コンサート・イベントチケットのUIや、デジタル入場券の真正性表示に使えます。回転と拡大のアニメーションを別々の要素に分けているので、2つの動きが同じtransformで衝突しません。

.stampwrap {
  transition: transform $duration $easing;
}
.stampwrap:hover { transform: scale(1.15); filter: brightness(1.2); }
.stamp {
  background: conic-gradient(from 0deg, #ff5ecb, #5ef1ff, #a3ff5e, #fff45e, #ff5ecb);
  animation: spin 3s linear infinite;
}

06正規品認証シール(ギザギザ縁)

星形のギザギザ縁をclip-pathで切り抜き、虹色グラデーションを重ねてゆっくり回転させます。ホバーすると回転が速くなります。正規品認証ステッカー、公式グッズシール、品質保証バッジに使います。

.seal__shape {
  clip-path: polygon(50% 0%, 61% 12%, 75% 6%, 78% 20%, 93% 20%, 90% 35%, 100% 43%,
                      90% 55%, 96% 68%, 82% 70%, 80% 85%, 65% 80%, 58% 93%, 50% 82%);
  background: conic-gradient(from 0deg, #ff5ecb, #5ef1ff, #a3ff5e, #fff45e, #ff5ecb);
  animation: seal-spin 2s linear infinite;
}
.seal:hover .seal__shape { animation-duration: 700ms; }

07価格タグのホログラムリボン

価格タグの角にかかったリボンが箔のように輝き、ホバーするとわずかに揺れながら光がリボンの上を走り抜けます。セール価格タグ、新着リボンタグ、プロモーションバッジに使います。

.tag__ribbon {
  transform: rotate(35deg);
  background: repeating-linear-gradient(115deg,
    #ff5ecb 0 10%, #5ef1ff 10% 20%, #a3ff5e 20% 30%, #fff45e 30% 40%);
  background-size: 220% 220%;
  transition: transform $duration $easing, background-position $duration $easing;
}
.tag:hover .tag__ribbon { transform: rotate(30deg) translateY(-2px); background-position: 100% 40%; }

08アバターのホログラムステータスリング

プロフィールアバターの縁をconic-gradientのリングがゆっくり回転し、「プレミアム」「配信中」などの特別な状態を示します。プレミアム会員アバターの縁取り、配信中の表示、VIPプロフィールバッジに使います。03番の認証バッジと同じmask-imageの技法ですが、中にチェックマークの代わりに写真が入る点が違います。

.avatar-wrap__ring {
  background: conic-gradient(from 0deg, #ff5ecb, #5ef1ff, #a3ff5e, #fff45e, #ff5ecb);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: ring-spin 2s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

09ローディングバッジのホログラムシマー

処理中を知らせるバッジの上を虹色の斜めの帯が繰り返し走り、終わるまで輝き続けます。決済処理中バッジ、アップロード・同期の進行表示、AI生成待機状態に使います。

.loading-badge__shine {
  background: repeating-linear-gradient(115deg, transparent 0 12%,
    rgba(255,94,203,.55) 12% 16%, rgba(94,241,255,.55) 16% 20%, rgba(163,255,94,.55) 20% 24%, transparent 24% 36%);
  background-size: 260% 260%;
  animation: shimmer-sweep 2s linear infinite;
}
@keyframes shimmer-sweep { to { background-position: -260% -260%; } }

どこで壊れるか(落とし穴)

01番で使うmix-blend-mode: color-dodgeは、カードの背景が暗いほど自然に見えますが、背景がほぼ白に近いとハイライトが白飛びしてしまいます。カード自体に暗めのグラデーション($stage-ink系)を敷いてコントラストを保つ必要があります。また03・06・08番のようにconic-gradientを回転させる項目は、アニメーション対象がtransform: rotate()だけなので@propertyの登録なしでもすべてのブラウザで滑らかに補間されますが、01番のハイライト移動は、実際にカーソルを動かしたときはbackground-positionをトランジションで動かす方式で、格子で自動再生されるプレビューのループだけは別に--mxというカスタムプロパティそのものをキーフレームに入れず、background-position自体をキーフレームで直接指定しました。カスタムプロパティを@property登録なしでキーフレーム化すると、Safari 16.4未満ではカクついて見える場合があるためです。この9ファイルの圧縮パスワードは5tktgjj6で、この文章の中にそのまま書いてあります。

アクセシビリティ

9個すべてprefers-reduced-motion: reduceでループとトランジションを止め、静止した見た目に落ち着きます。01は傾きとハイライトのトランジションが消えてハイライトだけが控えめに残り、02は角がめくれた状態のまま固定され、03と08はリングの回転が止まり、04はグラデーションが一つの色で止まり、05・06・07・09は回転・スイープ・パルスが止まって静的な形だけが残ります。01番のpointermoveによるチルトはキーボード操作では最初から発生しないため、:focus-visibleにはチルトなしでハイライトだけ点く代替動作を別に用意しました。mix-blend-modeの対応状況はMDNのドキュメントで確認できます。カードホバー効果をもっと見たい方は、以前公開したカードホバー効果のまとめやテキストグラデーションのまとめもあわせてご覧ください。

FAQ

01番のマウスチルトは、マウスのないタッチ端末ではどうなりますか?

pointermoveはマウス・ペン・タッチをすべて同じイベントとして受け取るため、指でカードをドラッグすればハイライトも追従します。ドラッグせずタップだけの場合は、@media (hover: none)で:active状態のときにチルトなしでハイライトだけが点く代替動作が入っています。

03・08番のリングアニメーションは@propertyがなくても滑らかに回りますか?

はい。どちらもアニメーション対象がカスタムプロパティではなくtransform: rotate()なので、@propertyの登録なしでも最新ブラウザ全体で滑らかに補間されます。@propertyが必要になるのは、カスタムプロパティ自体をキーフレームの値にする場合だけです。

React版で01番はstateを使いますか?

いいえ。HoloCardMouseTiltはuseStateを使わず、useRefでDOMを直接つかみstyle.setPropertyでカスタムプロパティを更新します。ポインターが動くたびに再レンダリングすると重くなるため、Reactツリーを再描画せずCSSの値だけを書き換える方式にしています。