我正在尝试创建具有变换旋转属性的摆动按钮, 它在 Opera 和 Chrome 浏览器中工作正常,但在 Firefox 中它会在按钮边框中产生奇怪的像素问题:
我的按钮和摆动关键帧的 CSS 代码
.RedButton {
background-color: #bc0000;
border-radius: 7px;
border: 1px solid #bc0000;
display: inline-block;
cursor: pointer;
color: #fff !important;
font-family: Arial;
font-size: 30px;
font-weight: bold;
padding: 7px 24px;
text-decoration: none;
margin-top: 15px;
animation: swing 5s infinite;
-moz-animation: swing 5s infinite;
transition: 0.2s;
-moz-transition: 0.2s;
}
@-moz-keyframes swing {
20%,
60% {
-moz-transform: rotate(5deg);
}
40%,
80% {
-moz-transform: rotate(-5deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
@keyframes swing {
20%,
60% {
transform: rotate(5deg);
}
40%,
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="RedButton">Get Started Now!</div>
我错过了什么吗?
最佳答案
添加一个小阴影让它看起来更好:
.RedButton {
background-color: #bc0000;
border-radius: 7px;
border: 1px solid #bc0000;
display: inline-block;
cursor: pointer;
color: #fff ;
font-family: Arial;
font-size: 30px;
font-weight: bold;
padding: 7px 24px;
text-decoration: none;
margin-top: 15px;
animation: swing 5s infinite;
box-shadow: 0 0 1px #bc0000;
}
@keyframes swing {
20%,
60% {
transform: rotate(5deg);
}
40%,
80% {
transform: rotate(-5deg);
}
}
<div class="RedButton">Get Started Now!</div>
关于Firefox 中的 CSS 变换旋转像素问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62634997/