我试图将scale
动画应用于引导按钮,但它的文本模糊。我尝试了这里发布的所有答案。我该如何解决这个问题?
这是代码(它在片段中显示的模糊程度比我的项目中少一点(:
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>
正如我在评论中所说,这是使用缩放以获得相同效果的替代方法:
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>
显然,它可能需要一些调整才能获得正确的确切造型需求,但应该可以正常工作。