CSS3中的放大縮小是一種非常實用的特效。放大縮小可以通過CSS屬性來實現,例如transform屬性、scale屬性、transition屬性、animation屬性等等。
transform: scale(1.5); /* 以中心點為基準縮放 */ transform-origin: 50% 50%; /* 設置縮放中心點為元素中心 */
使用transform屬性和scale屬性可以實現元素的放大縮小。其中scale的值為1為原尺寸,小于1為縮小,大于1為放大。同樣的,transform-origin屬性可以設置元素的縮放中心點,可以是一個坐標值。
transition: transform 0.5s ease-in-out; /* 縮放動畫 */
如果想要實現縮放動畫,可以使用transition屬性。以上代碼中,transition指定了一個transition效果,即對transform縮放屬性進行0.5秒的變化,并且緩動效果為ease-in-out。
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.5); } } .box { animation: zoom 1s ease-in-out infinite alternate; }
還可以使用animation屬性來實現放大縮小的動畫效果。以上代碼中,使用@keyframes定義一個名為zoom的動畫。從原始大小到1.5倍大小的縮放。然后將類名為.box的元素指定為這個動畫,使用animation屬性即可。其中1s為動畫執行時間,infinite為無限循環執行,alternate表示反向播放。