CSS中有许多属性可用于改变图片的大小和外观。其中一个有趣的属性是“transform: scale()”。
img:hover { transform: scale(1.2); }
这个属性可以将图像原来的大小扩展一定比例,具有增强视觉效果的作用。以上示例中,当鼠标悬停在图片上时,图像将放大20%。
“transform: scale()”还有其他的用法。您可以使用负数将图片缩小,如“transform: scale(0.8)”可以将图像缩小20%。
img:active { transform: scale(0.8); }
您还可以添加其他转换属性来创造更复杂的动画效果,如旋转和倾斜。例如,使用“transform: rotate()”可以使图像以角度旋转。
img:hover { transform: rotate(45deg); }
通过在图片上使用这些转换属性,您可以创造出具有吸引力和动态感的网站设计。