时间戳

首页 > 解决方案 > Firefox中的CSS变换旋转像素问题

css - Firefox中的CSS变换旋转像素问题

问题描述

我正在尝试使用变换旋转属性创建摇摆按钮，它在 Opera 和 chrome 浏览器中运行良好，但在 Firefox 中，它在按钮边框中创建奇怪的像素问题：

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>

我错过了什么吗？

标签： cssfirefoxcss-transitionscss-transforms

解决方案

添加一个小阴影使它看起来更好：

.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>

推荐阅读