CSS3可以通過transform屬性來實現元素的放大縮小,特別是對于div標簽,可以加入動畫效果,使頁面更加生動有趣。
首先,我們可以利用div標簽來創建一個盒子,然后通過CSS3中的transform屬性來實現放大縮小的效果。加上transition屬性后,我們可以看到盒子的大小在不斷變化,形成一個動態效果。
.box{ width:100px; height:100px; background:#ccc; transform: scale(1); transition: transform 0.5s; cursor:pointer; } .box:hover{ transform: scale(1.5); }
上面的代碼中,利用transform的scale屬性來控制大小。當鼠標懸停在盒子上時,我們加了:hover偽類,當懸停時,大小變為原來的1.5倍,形成放大的效果。
除了放大效果,我們同樣可以利用transform的scale屬性來實現縮小效果。只需將:hover偽類中的scale(1.5)改為scale(0.5)即可。
.box:hover{ transform: scale(0.5); }
最后,這個盒子的大小變化效果就可以通過CSS3的transform屬性來實現,形成一個豐富多彩的動畫效果。
上一篇css3d房間
下一篇mysql輸出調整列寬