GODRICH

9 hiệu ứng CSS Holographic Card Effect copy-paste

· Godrich · 9 kiểu · Đọc trong 13 phút

Phản hồiSCSSChỉ CSSHoverThanh toán · mua sắm

Hiệu ứng css holographic card effect giả lập cách lá thiếc phản chiếu ánh sáng theo góc nhìn, chỉ bằng CSS — lấp lánh như thẻ bài Pokémon.

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

Tự chạy · bấm ô để tới mục đó · cả 9 trong một zip

Thứ tự chín hiệu ứng dưới đây không theo độ phổ biến mà theo trình tự một bề mặt lấp lánh thật sự xuất hiện trên màn hình. Thẻ sản phẩm bắt lấy con trỏ và thu hút ánh nhìn trước tiên (01), sticker được dán lên như trang trí (02), huy hiệu tròn củng cố niềm tin (03), tiêu đề chữ tạo không khí (04), vé xác nhận việc mua hàng (05), tem xác thực chứng minh hàng thật (06), ruy băng trên bảng giá thúc đẩy mua sắm (07), vòng avatar đánh dấu danh tính (08), và cuối cùng huy hiệu loading lấp đầy thời gian chờ (09).

Số Tên Cái gì chuyển động JS
01 Nghiêng thẻ theo con trỏ kiểu holographic vị trí highlight, rotateX/rotateY của thẻ 8 dòng
02 Góc sticker hơi bong + ánh holographic quét qua transform của góc, background-position của lớp sáng không
03 Vòng holographic quanh huy hiệu xác thực conic-gradient của vòng xoay không
04 Chữ holographic đổi màu cầu vồng filter: hue-rotate, background-position không
05 Con dấu holographic trên cuống vé con dấu xoay + scale nhịp không
06 Tem chính hãng tốc độ xoay của tem clip-path không
07 Ruy băng holographic trên bảng giá rotate/background-position của ruy băng không
08 Vòng trạng thái holographic quanh avatar conic-gradient của vòng xoay không
09 Huy hiệu loading lấp lánh holographic background-position của dải chéo, scale của chấm không

01Nghiêng thẻ theo con trỏ kiểu holographic

Khi rê chuột qua thẻ, một vệt sáng cầu vồng chạy theo vị trí con trỏ và cả thẻ nghiêng nhẹ theo hướng đó. Phù hợp với thẻ sản phẩm giới hạn hoặc trang chi tiết merch muốn có vẻ lấp lánh như thẻ bài sưu tầm. :hover một mình không đọc được tọa độ chính xác của con trỏ, nên chỉ 8 dòng pointermove cập nhật đúng bốn custom property: --mx, --my, --rx, --ry.

mix-blend-mode: color-dodgepointermove → --mx/--myconic-gradient
.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');
});

02Góc sticker hơi bong + ánh holographic quét qua

Một góc thẻ sticker luôn hơi bong lên sẵn, khi rê chuột một dải ánh cầu vồng quét chéo bên dưới nó. Hợp với mockup sticker planner/nhật ký, và bản xem trước sticker dạng badge cho sản phẩm.

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%;
}

03Vòng holographic quanh huy hiệu xác thực

Ánh sáng cầu vồng chạy vòng quanh viền huy hiệu không ngừng nghỉ. Dùng cho huy hiệu hàng chính hãng, dấu người bán đã xác minh, tem giới hạn cho merch. mask-image chỉ giữ lại phần hình vòng, còn conic-gradient đổi màu theo góc giống cách một tấm lá thiếc thật phản chiếu ánh sáng.

conic-gradientmask: radial-gradient@keyframes rotate
.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); } }

04Chữ holographic đổi màu cầu vồng

Chữ phủ gradient cầu vồng rồi chạy filter: hue-rotate liên tục, giống hệt cách chữ dán holographic in thật đổi màu không ngừng. Hợp làm tiêu đề trang sự kiện, tên sản phẩm giới hạn, banner concept holographic.

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%; } }

05Con dấu holographic trên cuống vé

Con dấu tròn trên cuống vé xoay nhẹ nhàng bằng conic-gradient, khi rê chuột sẽ to hơn và sáng hơn một chút. Hợp với UI vé concert/sự kiện, dấu xác thực trên vé vào cửa dạng số. Animation xoay và animation phóng to nằm trên hai phần tử khác nhau nên hai chuyển động không tranh nhau cùng một transform.

conic-gradienttransform: scalebox-shadow 확산
.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;
}

06Tem chính hãng (viền răng cưa)

Viền hình sao răng cưa được cắt bằng clip-path, phủ gradient cầu vồng xoay chậm lên trên; khi rê chuột tốc độ xoay nhanh hơn. Dùng cho sticker hàng chính hãng, tem merch chính thức, huy hiệu bảo đảm chất lượng.

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; }

07Ruy băng holographic trên bảng giá

Dải ruy băng vắt qua góc bảng giá lấp lánh như lá thiếc, khi rê chuột lắc nhẹ và ánh sáng quét ngang qua nó. Dùng cho bảng giá giảm giá, thẻ ruy băng hàng mới, huy hiệu khuyến mãi.

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%; }

08Vòng trạng thái holographic quanh avatar

Một vòng conic-gradient xoay chậm quanh avatar hồ sơ để báo hiệu trạng thái đặc biệt như "premium" hay "đang live". Hợp với khung avatar thành viên premium, báo hiệu đang livestream, huy hiệu hồ sơ VIP. Đây là cùng kỹ thuật mask-image như mục 03, chỉ khác là bên trong đặt ảnh thay vì dấu tích.

conic-gradient 링mask: radial-gradient@keyframes rotate
.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); } }

09Huy hiệu loading lấp lánh holographic

Một dải chéo cầu vồng quét lặp lại trên huy hiệu "đang xử lý", giữ cho nó lấp lánh cho đến khi xong việc. Dùng cho huy hiệu đang xử lý thanh toán, báo tiến trình upload/đồng bộ, trạng thái chờ AI tạo nội dung.

repeating-linear-gradientbackground-position 애니메이션transform: scale 펄스
.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%; } }

Chỗ nào dễ hỏng (bẫy)

mix-blend-mode: color-dodge ở mục 01 càng gắt khi nền thẻ càng sáng màu — nếu nền gần trắng, nó có thể làm cháy sáng cả thẻ thành trắng xóa, nên thẻ cần một lớp gradient tối (kiểu $stage-ink) bên dưới để giữ độ tương phản. Các mục 03, 06, 08 chỉ animate transform: rotate() thuần túy nên nội suy mượt ở mọi trình duyệt mà không cần @property; còn highlight ở mục 01 chỉ transition background-position khi con trỏ thật sự di chuyển; vòng lặp xem trước tự động trên lưới demo là một trường hợp riêng, animate trực tiếp thuộc tính đó thay vì custom property --mx, vì animate một custom property trong @keyframes mà không đăng ký qua @property có thể giật cục trên Safari dưới 16.4. Mật khẩu nén của chín tệp này là 5tktgjj6, được viết thẳng trong câu này như mọi câu văn bình thường khác.

Khả năng tiếp cận

Cả chín hiệu ứng đều tắt vòng lặp và transition dưới prefers-reduced-motion: reduce và dừng lại gần trạng thái tĩnh. Mục 01 bỏ transition nghiêng và highlight, chỉ để lại một highlight mờ nhẹ; mục 02 giữ nguyên góc đã bong sẵn; mục 03 và 08 dừng xoay; mục 04 dừng lại ở một điểm màu của gradient; mục 05, 06, 07, 09 dừng xoay/quét/nhịp và chỉ còn lại hình tĩnh. Vì thao tác nghiêng pointermove ở mục 01 vốn không kích hoạt với người dùng bàn phím, :focus-visible có một trạng thái thay thế riêng chỉ bật highlight mà không nghiêng thẻ. Mức hỗ trợ mix-blend-mode của các trình duyệt được ghi ở tài liệu MDN. Nếu muốn xem thêm ý tưởng hiệu ứng hover cho thẻ, có thể tham khảo bộ sưu tập hiệu ứng hover cho thẻ và bộ sưu tập chữ gradient lấp lánh đã đăng trước đó cùng một dòng hình ảnh với bài này.

FAQ

Thẻ nghiêng theo con trỏ ở mục 01 sẽ ra sao trên thiết bị cảm ứng không có chuột?

pointermove nhận cả chuột, bút cảm ứng lẫn chạm ngón tay trong cùng một sự kiện, nên kéo ngón tay qua thẻ vẫn làm highlight di chuyển theo. Nếu chỉ chạm mà không kéo, @media (hover: none) sẽ bật trạng thái :active thay thế, chỉ sáng highlight mà không nghiêng thẻ.

Animation vòng ở mục 03 và 08 có cần @property để chạy mượt không?

Không cần. Cả hai đều animate transform: rotate() chứ không phải trực tiếp một custom property, nên mọi trình duyệt hiện đại đều nội suy mượt mà không cần đăng ký gì thêm. @property chỉ thật sự cần khi chính custom property đó là giá trị được đặt trong keyframe.

Bản React của mục 01 có dùng state không?

Không. HoloCardMouseTilt không dùng useState mà dùng useRef để nắm giữ trực tiếp phần tử DOM rồi cập nhật custom property qua style.setProperty. Nếu render lại cả cây React mỗi lần con trỏ di chuyển thì sẽ tốn hơn nhiều so với chỉ đổi giá trị CSS.

Nhập mật khẩu file nén

Mật khẩu nằm ngay trong bài viết này. Đọc tới đó bạn sẽ thấy.