Question

我最近正在尝试使用HTML / CSS对一个动画按钮（具体来说，这是一个经过修饰的链接）进行编码，对于我需要避免的所有事情都产生了争议，但我要成功还有一个问题：使以下编码的按钮动画化就像悬停并处于活动状态的transform属性。

.button{
  display:inline;
  text-decoration:none;
  font-size:50px;
  font-family:monospace;
  color:blue;
  margin:15px;
  padding:5px 10px;
  background-color:lightgreen;
  box-shadow:5px 10px grey;
  border-radius:15px;
  position:relative;
}
.button:hover{
  background-color:yellow;
  color:darkgreen;
  top:-5px;
  left:-3px;
  box-shadow:8px 15px grey;
}
.button:active{
  top:+3px;
  left:+5px;
  box-shadow:5px 5px grey;
}

<div class="button">Button</div>

Answer 1

您需要使用transition来设置应对哪些属性进行动画处理（即all），动画应持续多长时间（我通常选择0.25s来获得悬停效果）和计时功能。

您还需要在默认块的:hover中定义您正在使用的所有属性（即top，left）

.button {
  transition: all 0.25s linear;
  font-size: 50px;
  font-family: monospace;
  color: blue;
  margin: 15px;
  padding: 5px 10px;
  background-color: lightgreen;
  box-shadow: 5px 10px grey;
  border-radius: 15px;
  position: relative;
  top: 0px;
  left: 0px;
}

.button:hover {
  background-color: yellow;
  color: darkgreen;
  top: -5px;
  left: -3px;
  box-shadow: 8px 15px grey;
}

.button:active {
  top: 3px;
  left: 5px;
  box-shadow: 5px 5px grey;
}

<button class="button">Hello</button>

有没有办法使该按钮动起来？

1 个答案: