Question

我试图实现和动画渐变按钮，我之前已经看过并在Firefox中工作，但由于某些原因，我的工作并不起作用。我尝试过为动画添加前缀，但这没有做任何事情。

＆＃13;

.bookParty {
  background: linear-gradient(to right, #e90027 0%, #00edff 52%, #e90027);
  display: inline-block;
  background-size: auto 200%;
  background-position: 0 100%;
  padding: 15px;
  animation: Gradient 5s linear infinite forwards;
  transition: all .6s ease;
}

@keyframes Gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200% 0;
  }
}

＆＃13;

<div class="bookParty">
  <span class="skew"><h2>Book a Party</h2></span>
</div>

＆＃13;

Answer 1

此处的工作示例：

function reverseNumber(number) {
  var revNumber = 0;
  while (number > 0) {
    revNumber = (revNumber * 10) + (number % 10);
    number = Math.floor(number / 10);
  }
  return revNumber;
}
console.log(reverseNumber(876));

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(transparent, rgba(0, 0, 0, .6)), linear-gradient(to bottom right, #ECECEC 50%, transparent 50%, #fff 50%);
  height: 100vh;
  width: 100vw;
}

.bookParty {
  -webkit-animation: Gradient 3s linear infinite;
  -z-animation: Gradient 3s linear infinite;
  -o-animation: Gradient 3s linear infinite;
  animation: Gradient 3s linear infinite alternate;
  background: linear-gradient(to right, #e90027 0%, #00edff 52%, #e90027);
  background-size: 200% 200%;
  padding: 25px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: bold;
  text-shadow: 0 8px 16px rgba(0, 0, 0, .3);
  color: #fff;
}

@keyframes Gradient {
  to {
    background-position: 50vw;
  }
}

Firefox中的动画渐变不起作用

1 个答案: