卡片縮放效果是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)動(dòng)畫效果，可以使頁(yè)面更加生動(dòng)有趣。CSS可以實(shí)現(xiàn)卡片縮放效果，下面我們來(lái)了解一下。

.card {
transition: transform .3s ease;
}
.card:hover {
transform: scale(1.2);
}

上面的代碼表示當(dāng)鼠標(biāo)懸浮在.card類選擇器所選定的元素上時(shí)，通過(guò)transform屬性將它的大小擴(kuò)大到原來(lái)的1.2倍，達(dá)到縮放的效果。transition屬性指定了過(guò)渡時(shí)間（.3s）和過(guò)渡方式（ease），表示從原始大小到變大的過(guò)程需要0.3秒，變化速率呈現(xiàn)緩慢增加的狀態(tài)。

當(dāng)然，如果需要向內(nèi)縮小的效果，只需要將縮放倍數(shù)改為小于1即可。

.card {
transition: transform .3s ease;
}
.card:hover {
transform: scale(0.8);
}

另外，還可以通過(guò)transition屬性指定其他屬性進(jìn)行動(dòng)畫，比如opacity（透明度）屬性，這樣就可以實(shí)現(xiàn)漸隱漸現(xiàn)的縮放效果。

.card {
transition: transform .3s ease, opacity .5s ease;
}
.card:hover {
transform: scale(1.2);
opacity: 0.5;
}

上面的代碼表示當(dāng)鼠標(biāo)懸浮在.card類選擇器所選定的元素上時(shí)，通過(guò)transform屬性和opacity屬性將它的大小擴(kuò)大到原來(lái)的1.2倍，并且透明度變?yōu)?.5，達(dá)到漸隱漸現(xiàn)的縮放效果。

總之，CSS可以實(shí)現(xiàn)卡片縮放效果，并且還可以通過(guò)transition屬性組合其他屬性進(jìn)行更加豐富的動(dòng)畫效果。