iT邦幫忙

2025 iThome 鐵人賽

0
自我挑戰組

給愛追劇的你:30天互動網站挑戰系列 第 24

Day 24:卡片層次 & 玻璃質感

  • 分享至 

  • xImage
  •  

1. 色票微調(放在 :root{...} 後面即可)

/* Day24 tokens tweak */
:root{
  --y2k-blur: 10px;                /* 玻璃模糊強度 */
  --y2k-glow-strong: 0 0 24px rgba(167,139,250,.55), 0 0 46px rgba(0,229,255,.30);
  --y2k-border-strong: rgba(255,255,255,.22);
}

2. 卡片/封面/內容玻璃層(覆蓋既有樣式)

/* ===== Day24: Card depth & glass ==================================== */

/* 卡片外框:更強的霓虹邊緣與景深 */
.card{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background: var(--y2k-card);
  border:1px solid var(--y2k-border);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  opacity:0; transform: translateY(8px);
}

/* 霓虹邊框光暈(外層) */
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background: conic-gradient(from 180deg, var(--y2k-pink), var(--y2k-neon), var(--y2k-cyan), var(--y2k-pink));
  filter: blur(16px);
  opacity:.26;
  z-index:0;
}

/* 內層玻璃邊框(用蒙版製造細邊效果) */
.card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding:1px;               /* 控制邊緣粗細 */
  border-radius:20px;
  opacity:.6;
  z-index:1;
}

/* 卡片滑過的立體感與強霓虹 */
.card:hover{
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), var(--y2k-glow-strong);
  border-color: var(--y2k-border-strong);
  filter: saturate(1.04);
}

/* 封面:加入上層色帶與下層漸層,讓標題讀性更好 */
.cover{
  position:relative; z-index:2; /* 蓋過 ::before/::after */
  width:100%; aspect-ratio:16/9; object-fit:cover; background:#0b1020;
}

/* 封面上層漸層(上方冷色、下方暖色) */
.cover::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0) 35%, rgba(0,0,0,.25) 75%),
    radial-gradient(80% 50% at 10% 0%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(80% 50% at 90% 0%, rgba(255,106,213,.16), transparent 60%);
  pointer-events:none;
}

/* 卡片內容區:玻璃+模糊+飽和度,與封面有層次差 */
.card-body{
  position:relative; z-index:3;
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-top: 1px solid var(--y2k-border);
  backdrop-filter: blur(var(--y2k-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--y2k-blur)) saturate(140%);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* 標題:加一點發光與字重,避免刺眼 */
.title{
  margin:0 0 6px; font-weight:800; letter-spacing:.4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow: 0 0 10px rgba(167,139,250,.25);
}

/* 副資訊:做半透明膠囊背景,Y2K 味道更明顯 */
.meta{
  margin:0; color:#cbd5ff; opacity:.95;
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(0,229,255,.12));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* 收藏按鈕:微光澤&提升按下的反饋 */
.fav{
  margin-top:12px; width:100%;
  padding:10px 0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: radial-gradient(200px 40px at 20% -20%, rgba(255,255,255,.15), transparent 60%), rgba(255,255,255,.05);
  color:#fff; cursor:pointer; letter-spacing:.3px;
  position:relative; overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.fav::before{
  content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  transform:skewX(-25deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation:shine 2.8s infinite ease;
}
.fav:hover{ transform: translateY(-1px); box-shadow: var(--y2k-glow-strong); border-color: var(--y2k-border-strong); }
.fav.is-active{
  border-color: rgba(167,139,250,.75);
  background: linear-gradient(90deg, rgba(167,139,250,.25), rgba(0,229,255,.22));
  box-shadow: 0 0 20px rgba(167,139,250,.5), 0 0 40px rgba(0,229,255,.25);
}
@keyframes shine{
  0%{ left:-40%; } 60%{ left:120%; } 100%{ left:120%; }
}

驗收重點

  • 滑過卡片會更「立體」:上浮+霓虹陰影加強,但不刺眼。
  • 封面頂部有冷色、底部有暗化處理,標題與副資訊更清楚。
  • 內容區有玻璃質感(模糊+飽和),與封面層次分明。
  • 收藏按鈕有光帶掃過與按下高亮狀態。

上一篇
Day 23:按鈕系統 & 微互動
下一篇
Day 25:入場動畫 & 捲動揭示
系列文
給愛追劇的你:30天互動網站挑戰30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言