如何使用 CSS 创建动画悬停 3-D 按钮效果？(1)

📌 相关文章

📜 如何使用 CSS 创建动画悬停 3-D 按钮效果？(1)

📅 最后修改于: 2023-12-03 15:23:50.166000 🧑 作者: Mango

如何使用 CSS 创建动画悬停 3-D 按钮效果？

在Web设计中，动画悬停3D按钮是一个非常炫酷的效果。利用CSS可以非常简单地实现这种效果。在本篇文章中，我们将通过一个简单的示例来学习如何使用CSS创建动画悬停3D按钮效果。

示例代码

<!DOCTYPE html>
<html>
<head>
<style>
.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 30px;
  position: relative;
}

.btn:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.btn:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>

<h2>动画悬停3D按钮</h2>

<button class="btn">按钮</button>

</body>
</html>

代码解析

悬停效果

我们可以使用:hover伪类来控制悬停效果，当用户鼠标悬停在按钮上时，将执行一些样式变更动画。

.btn:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

上面的代码将在用户悬停在按钮上时，添加一个阴影效果，看起来像是按钮弹起了一样。当然，你也可以通过添加其他的CSS属性来实现你所想要的效果。

3D效果

在按钮被点击时，我们想实现一个3D效果，让按钮看起来像是在向下移动。我们可以使用:active伪类，它会在用户激活了一个元素时触发，例如：当用户按下按钮时，:active类将被应用到按钮上。

.btn:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

上面的代码将在用户点击按钮时，将按钮略微向下移动，使其看起来像是3D效果。

小结

通过本文，我们学习了如何使用CSS创建动画悬停3D按钮效果。我们使用:hover和:active伪类，以及添加CSS属性来控制元素的外观和行为。这个例子非常简单，但是你可以通过增加其他CSS属性和动画效果来扩展这个功能。