html - 有没有办法让这个按钮动画？

Question

我最近正在尝试使用 HTML/CSS 编写一个动画按钮（它是一个特定的装饰链接），对我需要避免的所有事情提出异议，我还有一个问题要成功：使以下编码的按钮像变换一样动画悬停和活动的属性。

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

标签： htmlcss

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>