CSS3中提供了很多新特性,其中一個就是可以用CSS3實現盒子的放大效果。這種效果可以給網頁帶來更為生動的視覺表現,使得網頁看起來更加有趣。
.box { width: 200px; height: 200px; background-color: #f00; transition: all 0.5s ease-in-out; } .box:hover { transform: scale(1.2); }
上面的代碼就是一個簡單的例子。我們創建一個寬高為200px的盒子,并給它一個紅色背景。然后使用CSS3中的transition屬性來指定一個動畫效果,并在:hover狀態下使用transform屬性來實現放大效果。transform屬性中的scale()函數可以指定放大倍數,這里我們指定為1.2,所以盒子的大小會增加20%。
需要注意的是,這里使用的transition屬性指定了all,表示對CSS的所有屬性進行動畫,也可以只對特定的屬性進行動畫,比如只對transform屬性進行動畫。
CSS3的盒子放大效果并不只限于上面的簡單例子,還可以和其他CSS屬性結合起來運用,比如配合圓角、陰影等屬性,可以實現更為豐富的效果。