[分享]css元素等比例放大缩小动画

如果你想让页面上的某个元素有放大缩小的动画效果，而且这个元素需要等比例缩放，那么就需要使用CSS的transform属性和transition属性。首先需要设置元素的默认大小和位置：div { wid...

如果你想让页面上的某个元素有放大缩小的动画效果，而且这个元素需要等比例缩放，那么就需要使用CSS的transform属性和transition属性。

首先需要设置元素的默认大小和位置：

div {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

上述代码将一个div元素居中放置于父元素中，大小为100x100像素。

接下来，需要添加鼠标悬停时的放大缩小效果。使用:hover伪类触发动画效果，并添加transform属性实现等比例缩放：

div:hover {
  transform: scale(1.2);
  transition: transform 0.2s ease-in-out;
} 

上述代码表示当鼠标悬停在div元素上时，将元素的大小缩放到原来的1.2倍，并在0.2秒内实现平滑的动画效果。

如果希望在取消鼠标悬停时元素回到初始大小，则需要在:hover伪类之外添加一组transform属性：

div {
  transform: scale(1);
  transition: transform 0.2s ease-in-out;
} 

上述代码表示在初始状态下，div元素的大小为1倍。当鼠标悬停时，元素的大小缩放到1.2倍。在鼠标离开元素时，元素返回初始大小并实现平滑的动画效果。

总之，使用transform属性和transition属性可以轻松地实现CSS元素等比例放大缩小动画效果，为页面增添更丰富的交互体验。