CSS卡片放大動(dòng)畫(huà)是一種通過(guò)CSS樣式和動(dòng)畫(huà)實(shí)現(xiàn)卡片從原始大小逐漸放大到指定大小的動(dòng)畫(huà)效果,要實(shí)現(xiàn)這種效果,可以使用CSS的transform
屬性來(lái)縮放卡片的大小,同時(shí)使用transition
屬性來(lái)平滑過(guò)渡動(dòng)畫(huà)。
以下是一個(gè)簡(jiǎn)單的CSS卡片放大動(dòng)畫(huà)的實(shí)現(xiàn)示例:
.card { width: 200px; height: 300px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; padding: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease-in-out; } .card:hover { transform: scale(1.5); }
在這個(gè)示例中,我們定義了一個(gè)名為.card
的類,用于表示卡片的樣式和大小,卡片原始大小為寬度200px,高度300px,當(dāng)鼠標(biāo)懸停在卡片上時(shí),通過(guò)transform: scale(1.5)
將卡片放大到原始大小的1.5倍。transition: transform 0.3s ease-in-out
屬性使得放大過(guò)程更加平滑,持續(xù)時(shí)間為0.3秒。
你可以根據(jù)需要調(diào)整卡片的樣式、大小以及放大的倍數(shù)和持續(xù)時(shí)間,這種方法可以為你的網(wǎng)站或應(yīng)用增加一些交互性和趣味性。