我正在尝试转换一个按钮
,但在firefox中它确实是颗粒状的(在转换期间)。
有人可以看一下吗,代码如下...并且 js fiddle 链接附在此处 https://jsfiddle.net/L3f9cy7g/1/
firefox
中,我认为这与抗锯齿有关。我们尝试将其切换为 3D 变换,并调整 z-index
以防止 Firefox 浏览器干扰动画。到目前为止还没有运气。
<div class="closePop">
<p></p>
</div>
body{background:black;}
.closePop {
right: -5px;
top: -5px;
height: 28px;
background-color: #f68d1e;
color: white;
border-radius: 50%;
width: 29px;
text-align: center;
border-style: solid;
border-width: 2px;
vertical-align: middle;
cursor: pointer;
transform: rotate(0deg);
transition: all .3s ease-out;
}
.closePop p {
margin: 0;
margin-top: 4px;
}
.closePop:hover p:after {
content:':(';
transition:contentArea 3s ease-out rotate .3s ease-out;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: translateZ(1px) rotate(0deg);
}
.closePop p:after {
content: 'X';
transition: all .3s ease-out;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: translateZ(1px) rotate(90deg);
}
.closePop:hover {
border-radius: 0;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: translateZ(1px) rotate(90deg);
}
.closePop p {
transition: contentArea .3s ease-out rotate .3s ease-out;
}
最佳答案
尝试添加透明轮廓属性,
outline: 1px solid transparent;
关于html - Firefox 中的颗粒状按钮变换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33022951/