Question

我试图将scale动画应用于引导按钮，但它有模糊的文字。我尝试了here发布的每个答案。我该如何解决这个问题？
这是代码（它在代码片段中显示的模糊程度比在我的项目中少一些）：

button.btn-outline-dark{
    margin-top: 6%;
    width:30%;
    height: 17%;
    color: black;
}
button.btn-outline-dark:hover{
    transition: all .2s ease-in-out;
    transform: scale(1.1);
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;    
    -webkit-filter: blur(0);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#exampleModal">
    Blurry Text
</button>

Answer 1

正如我在评论中所说，这里有一个使用zoom来获得相同效果的替代方法：

button.btn-outline-dark{
    margin-top: 6%;
    color: black;
    transition:0.5s;
    padding: 10px 40px;
    font-size:14px;
}
button.btn-outline-dark:hover{
    font-size:20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#exampleModal">
    Blurry Text - Not Anymore
</button>

显然，可能需要进行一些调整以确保您的确切样式需求正确，但应该可以正常工作。

CSS - 缩放元素后的模糊文本

1 个答案: