css元素实现hover的时候元素宽度增加4px

494 阅读1分钟

 场景

   视觉上要是向左和向右各增加2px

方案分析

如果是直接hover的时候,改变元素宽度是不行的,因为宽度是向右边伸展的。

解决:在鼠标移上去的时候增加以下css代码

    .testwidth:hover {      transform:scaleX(2);    }

也可以优化一下效果:就是伸展的速度

 transition-duration: 0.5s;

知识补充

transform:scaleX :定义了沿x轴(水平)调整元素大小的变换。

transition-duration:过度动画所需要的时间

参考:

cloud.tencent.com/developer/s…

developer.mozilla.org/zh-CN/docs/…