css3 transition transform属性造成文字抖动

最新推荐文章于 2025-05-27 16:38:22 发布

weetch

最新推荐文章于 2025-05-27 16:38:22 发布

阅读量1.6w

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： css3

本文链接：https://blog.youkuaiyun.com/u011088792/article/details/76417689

前端开发专栏收录该内容

17 篇文章

订阅专栏

本文探讨了CSS信息栏在鼠标悬停时发生的抖动现象，并提供了解决方案。通过在CSS样式中加入translateZ(0)，可以有效地消除元素放大时产生的抖动问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象：信息栏第一行文字，最后总会抖动

这里写图片描述

代码：

.match .match-item{
    width: 200px;
    height: 300px;
    display: inline-block;
    margin: 0 10px 0;
    box-shadow: 0 1px 6px 2px rgba(1,1,1,0.6);
    border-radius: 2px;
    border: 2px solid rgba(1,1,1,0.6);
    transition: all 0.5s;
    position: relative;
    cursor: pointer;
}

.match .match-item:hover{
    transform: scale(1.05);
    box-shadow: 0 1px 8px 4px rgba(1,1,1,0.8);
    border: 2px solid #68d0ff;
}