Question

我正在尝试制作简单的按钮动画，但是由于某种原因它将无法工作。我从括号编辑器中获取了代码，并将其放在代码笔中，它可以正常工作，但在括号编辑器中无法正常工作。new按钮可以正常工作，而其他两个按钮则不能工作。有什么想法吗？

.btn-style {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: #5C5C5C;
  background: none;
  outline: none;
  border: none;
}

.btn-new {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 30px;
  font-size: 25px;
}

.btn-roll {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 370px;
  font-size: 25px;
}

.btn-hold {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 415px;
  font-size: 25px;
}

button:hover {
  color: black;
}

.btn-new:active {
  top: 32px;
}

.btn-roll:active {
  top: 372px;
}

.btn-hold:active {
  top: 417px;
}

<button type="button" class="btn-new btn-style">New Game</button>

<button type="button" class="btn-roll btn-style">Roll Dice</button>

<button type="button" class="btn-hold btn-style">Hold</button>

Answer 1

我不知道动画出了什么问题，因为您的代码是正确的。还有其他样式表或脚本可能会干扰动画吗？

不过，以下是一些建议，可能可以解决问题：请勿在可能的情况下使用绝对定位。

在这里，您可以更改Id approval_trade 1 closed 2 closed by 3 open 4 target 5 running 6 now来将按钮向下移动2个像素，而不是更改Id approval_trade 3 open 4 target 5 running 6 now属性：

select * 
from temp
where approval_trade <> 'closed' and approval_trade <> 'closed by'

这是完整的示例：

top

margin

简单的按钮效果不起作用

1 个答案: