使用 CSS3 制作悬浮卡片/按钮效果时，文字抖动的问题

2020.06.10记，使用 CSS3 动画特效制作卡片鼠标移入有悬浮效果时遇到的文字抖动掉帧问题，如下所示：

一、出现的问题

文字出现抖动：

gif5新文件.gif

代码：

<style>
* {
    margin: 0;
    font-family: "微软雅黑";
}
ul{
    list-style: none;
}
.box {
    margin: 40px auto;
    width: 400px;
    height: 300px;
    background-color: #f1f1f1;
    box-shadow:0px 2px 2px #ddd;
    transform: translateY(0);
    transition: .2s linear;
}
.box:hover {
    box-shadow:0px 4px 4px #c8c8c8;
    transform: translateY(-6px);
    transition: .2s linear;
}
.list {
    padding: 20px;
    text-align: left;
}
</style>
<body>
    <div class="box">
        <ul class="list">
            <li>
                6月5日，在港交所上市聆讯通过利好消息的加持下，京东股价大涨4.46%，创下历史新高，最新市值高达863.85亿美元。
                6年前，京东上市时按照19美元发行价计算市值为260亿美元，这意味着最早购买京东的美股投资者得到了232%的回报，
                6年增值3.3倍，京东股价也跑赢了北上深的房价。六年后，京东再次在港交所通过聆讯。时隔6年再上市，京东带来了
                新故事。在港交所新披露的招股书中，京东重新定义了自己：“一家领先的技术驱动电商公司。
            </li>
        </ul>
    </div>
</body>

我们会发现鼠标移入的时候，有一点文字掉帧的问题，当时是使用 translateY 造成该问题的出现，当我想应该用 translateZ 没设置造成视觉误差，于是我设置了 translateZ 发现依然没用。

二、解决方法

把 translateY 改成 position: relative; 绝对定位 top: 0; 移入的时候改为 top: -6px 完美解决该问题。使用 translateY 可能不是最好的动画效果。

效果：

gif5新文件 (1).gif

代码：

<style>
* {
    margin: 0;
    font-family: "微软雅黑";
}
ul{
    list-style: none;
}
.box {
    margin: 40px auto;
    position: relative;
    top: 0;
    width: 400px;
    height: 300px;
    background-color: #f1f1f1;
    box-shadow:0px 2px 2px #ddd;
    transition: .2s linear;
}
.box:hover {
    top: -6px;
    box-shadow:0px 4px 4px #c8c8c8;
    transition: .2s linear;
}
.list {
    padding: 20px;
    text-align: left;
}
</style>
<body>
    <div class="box">
        <ul class="list">
            <li>
                6月5日，在港交所上市聆讯通过利好消息的加持下，京东股价大涨4.46%，创下历史新高，最新市值高达863.85亿美元。
                6年前，京东上市时按照19美元发行价计算市值为260亿美元，这意味着最早购买京东的美股投资者得到了232%的回报，
                6年增值3.3倍，京东股价也跑赢了北上深的房价。六年后，京东再次在港交所通过聆讯。时隔6年再上市，京东带来了
                新故事。在港交所新披露的招股书中，京东重新定义了自己：“一家领先的技术驱动电商公司。
            </li>
        </ul>
    </div>
</body>

最后编辑于：2020.06.10 23:26:24