css3 宽度从中间变长

CSS3 可以通过一些新的属性来实现宽度从中间变长的效果。在这篇文章中，我们将介绍两种实现这种效果的方法，并提供示例代码。

/* 第一种方法 */.element {
      width: 0;
      margin: auto;
      transition: all .5s ease;
}
    br>
.element:hover {
      width: 80%;
}

这个方法的实现原理是，在默认状态下将元素的宽度设置为 0，并将左右 margin 设置为 auto，使元素水平居中。然后，在鼠标悬停时将宽度设置为想要的值，使用 transition 属性实现过渡效果。

/* 第二种方法 */.element {
      width: 40%;
      margin: 0 30%;
      transform: scaleX(0);
      transform-origin: 50% 0;
      transition: all .5s ease;
}
    br>
.element:hover {
      transform: scaleX(1);
}
    

这个方法的实现原理是，将元素的宽度设置为想要的值，然后将左右 margin 设置为相同的值，使元素水平居中。使用 transform 属性的 scaleX 函数将元素在水平方向上进行缩放，起始值为 0，使元素看起来像是没有宽度，然后在鼠标悬停时将 scaleX 的值设置为 1，实现宽度从中间变长的效果。

通过这两种方法，我们可以实现宽度从中间变长的效果，为页面添加更多的动态视觉效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！