目標
加上微動效:收藏按鈕彈跳、卡片浮起、chips 進出場。
改哪裡:style.css
/* Day 15:微動效 */
.card{ transition: transform .18s ease, box-shadow .18s ease; }
.card:hover{ transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-md); }
/* 收藏按鈕彈跳 */
@keyframes pop {
0% { transform: scale(1); }
40%{ transform: scale(1.2); }
100%{ transform: scale(1); }
}
.fav.is-active{ animation: pop .25s ease; }
/* chips 淡入淡出 */
.chip{ animation: chipIn .2s ease; }
@keyframes chipIn {
from { transform: scale(.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}