代码之家 › 专栏 › 技术社区 › Johnson

CSS文本震动firefox

css-animations firefox css3 css html

Johnson · 技术社区 · 6 年前

我正在制作一个按钮的动画,并在Firefox和Chrome中测试了动画。在Chrome中一切正常,但在Firefox中文本却在颤抖。有吗 -moz

当垃圾邮件点击它的时候应该很明显,尽管在这个片段中即使在Firefox上也做不到。。。。。

编辑:经过一番尝试和错误之后,我发现问题出在我转换时的文本框中:translate(-50%,-50%)。你知道其他的选择吗?我尝试了一个相对定位与前35%,但内容的盒子是削减方式之前

This is what I see . 文本运动会随着缩放而改变,但我可以向你保证,它在悬停之后会改变位置,即使从视频中看不清楚。

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;    
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    
    transition: all 0.2s;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.20);
}

.btn-white {
    background-color: #fff;
    color: #777;
}

<div class="text-box">
  <a href="#" class="btn btn-white">Click me</a>
 </div>

1 回复 | 直到 6 年前

kukkuz 6 年前

我猜这是一个致使 animation-duration 很短,我想你可以用下面的:

而不是 transition: all 0.2s transition: box-shadow 0.2s, transform 0.2s 到解决

.text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;    
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: box-shadow 0.2s, transform 0.2s; /* CHANGED */
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.20);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.20);
}

.btn-white {
    background-color: #fff;
    color: #777;
}

<div class="text-box">
  <a href="#" class="btn btn-white">Click me</a>
 </div>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前