CSS Hover动画不工作/ Hover不工作

Question

我的CSS Hover没有正常工作。当你悬停时，我试着做一个转换&一个按钮的动画，但它不工作。我的代码：

​

button.btn__1{
  font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 39px;
  margin: 7px;
  padding: 20px 35px;
  background-color: rgba(95, 95, 95, 0.836);
  color: rgb(212, 212, 212);
  letter-spacing: 1px;
  transition: 0.1s;
  opacity: 1;
  
}
button.btn__1:hover {
  opacity: 4;
  translate: scaleY(-8px);
}

<center><button class="btn__1"><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button></center>

​

请帮帮我!如果有语法错误，很抱歉。

Answer 1

translate和scale是transform的属性。而且，opacity范围在0-1之间，在:hover上有opacity: 4。我猜想你想要翻译(移动)并将不透明度改变为0.4，否则你需要更好地解释你想要达到的目标。

​

button.btn__1{
  font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 39px;
  margin: 7px;
  padding: 20px 35px;
  background-color: rgba(95, 95, 95, 0.836);
  color: rgb(212, 212, 212);
  letter-spacing: 1px;
  transition: 0.1s;
  opacity: 1;
  
}
button.btn__1:hover {
  opacity: 0.4;
  transform: translateY(-8px);
}

<button class="btn__1"><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button>

​

Answer 2

我从以下几个方面更改了您的代码：

translate: scaleY(-8px);

至：

transform: scaleY(0.8);

而且确实有用。我建议你读这份文件。

​

button.btn__1{
  font-family: 'Ubuntu', sans-serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 39px;
  margin: 7px;
  padding: 20px 35px;
  background-color: rgba(95, 95, 95, 0.836);
  color: rgb(212, 212, 212);
  letter-spacing: 1px;
  transition: 0.1s;
  opacity: 1;
  
}
button.btn__1:hover {
  opacity: 4;
  transform: scaleY(0.8);
}

<center><button class="btn__1"><img src="https://img.icons8.com/metro/26/000000/cable-release.png"/>Invite</button></center>

​