GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

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

· Godrich · 9種 · 7分で読める

フィードバックSCSSCSSのみホバー決済・EC

CSS ホログラムとは、角度によって光の反射が変わる箔素材を、CSSのグラデーションとアニメーションだけで再現する技法です。ポケモンカードのような輝きは何度も画面で見かけますが、いざコードにしようとすると手が止まることが多いので、カード・ステッカー・バッジ・チケットなど9種類を実際にレンダリングしてまとめました。

カードのホログラムマウスチルト01 holographic-foil-card-mouse-tilt ステッカーの角めくれ+ホログラムスイープ02 holographic-foil-sticker-peel-shine 認証バッジのホログラムリング03 holographic-foil-badge-verified-ring ホログラムテキスト(虹色回転)04 holographic-foil-text-iridescent チケット半券のホログラムスタンプ05 holographic-foil-ticket-stub-stamp 正規品認証シール(ギザギザ縁)06 holographic-foil-authenticity-seal 価格タグのホログラムリボン07 holographic-foil-price-tag-ribbon アバターのホログラムステータスリング08 holographic-foil-avatar-status-ring ローディングバッジのホログラムシマー09 holographic-foil-loading-shimmer-badge

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

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カードのホログラムマウスチルト

何が動くか

カードにカーソルを乗せると、位置に合わせて虹色のハイライトが表面を走り、カード全体がその方向へわずかに傾きます。限定商品カードや、ポケモンカードのように見せたいグッズ詳細ページに向いています。

カードのホログラムマウスチルト
新しいタブで開く

01 · カードのホログラムマウスチルト — 計測 累積面積 13.972% · 動いたフレーム 20/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

mix-blend-mode: color-dodgepointermove → --mx/--myconic-gradient

コードで見る所

: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ステッカーの角めくれ+ホログラムスイープ

何が動くか

ステッカーカードの一角が普段から少しめくれていて、ホバーするとその下を虹色のシートが斜めに走り抜けます。

ステッカーの角めくれ+ホログラムスイープ
新しいタブで開く

02 · ステッカーの角めくれ+ホログラムスイープ — 計測 累積面積 15.39% · 動いたフレーム 19/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

clip-path 모서리repeating-linear-gradientbackground-position 스윕

コードで見る所

手帳・プランナーステッカーのモックアップや、バッジ型商品ステッカーのプレビューに使えます。

.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認証バッジのホログラムリング

何が動くか

円形バッジの縁を虹色の光が絶え間なく一周します。正規品認証バッジ、認証済み出品者マーク、限定グッズのスタンプに使います。

認証バッジのホログラムリング
新しいタブで開く

03 · 認証バッジのホログラムリング — 計測 累積面積 2.312% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

conic-gradientmask: radial-gradient@keyframes rotate

コードで見る所

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を回し続け、印刷されたホログラムステッカーの文字のように色が絶えず変わります。

ホログラムテキスト(虹色回転)
新しいタブで開く

04 · ホログラムテキスト(虹色回転) — 計測 累積面積 2.844% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

background-clip: textfilter: hue-rotate@keyframes

コードで見る所

イベントページのタイトル、限定商品名、ホログラムコンセプトのバナーに向いています。

.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や、デジタル入場券の真正性表示に使えます。

チケット半券のホログラムスタンプ
新しいタブで開く

05 · チケット半券のホログラムスタンプ — 計測 累積面積 1.053% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

conic-gradienttransform: scalebox-shadow 확산

コードで見る所

回転と拡大のアニメーションを別々の要素に分けているので、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で切り抜き、虹色グラデーションを重ねてゆっくり回転させます。 ホバーすると回転が速くなります。

正規品認証シール(ギザギザ縁)
新しいタブで開く

06 · 正規品認証シール(ギザギザ縁) — 計測 累積面積 6.797% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

clip-path polygon@keyframes rotateanimation-duration 전환

コードで見る所

正規品認証ステッカー、公式グッズシール、品質保証バッジに使います。

.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価格タグのホログラムリボン

何が動くか

価格タグの角にかかったリボンが箔のように輝き、ホバーするとわずかに揺れながら光がリボンの上を走り抜けます。

価格タグのホログラムリボン
新しいタブで開く

07 · 価格タグのホログラムリボン — 計測 累積面積 1.608% · 動いたフレーム 19/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

rotate(35deg) 리본@keyframes swaybackground-position 스윕

コードで見る所

セール価格タグ、新着リボンタグ、プロモーションバッジに使います。

.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プロフィールバッジに使います。

アバターのホログラムステータスリング
新しいタブで開く

08 · アバターのホログラムステータスリング — 計測 累積面積 1.451% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

conic-gradient 링mask: radial-gradient@keyframes rotate

コードで見る所

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ローディングバッジのホログラムシマー

何が動くか

処理中を知らせるバッジの上を虹色の斜めの帯が繰り返し走り、終わるまで輝き続けます。

ローディングバッジのホログラムシマー
新しいタブで開く

09 · ローディングバッジのホログラムシマー — 計測 累積面積 1.649% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

repeating-linear-gradientbackground-position 애니메이션transform: scale 펄스

コードで見る所

決済処理中バッジ、アップロード・同期の進行表示、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の値だけを書き換える方式にしています。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。