CSS3圓心放大是一種在鼠標懸停在圓形圖像上時使圓心變大的效果。使用CSS3實現這種效果,既避免了使用 JavaScript 造成的性能問題,又可以讓網站更加美觀動人。
.circle { width: 200px; height: 200px; border-radius: 50%; background-color: #ccc; transition: all 0.3s ease-in-out; } .circle:hover { transform: scale(1.2); }
在這個示例中,首先通過 CSS 創建一個圓形的容器,并設定背景顏色及其他樣式。然后通過使用 transition 屬性設置動畫時間和動畫類型。最后是最重要的一步:在 hover 狀態下設置一個 1.2 的縮放比例。
這個效果使用起來非常簡單,只需在圓形圖像的 CSS 樣式表中添加以上代碼,即可實現鼠標懸停時的圓心放大動畫效果。
上一篇css3圓圈放大效果
下一篇css li浮動后縮小后