CSS 如何创建按钮悬停动画效果

CSS中的悬停动画效果指的是当鼠标指针悬停在元素上时，元素外观发生变化。我们可以使用CSS在悬停时创建各种动画效果，如缩放、淡入淡出、滑动或旋转元素。

按钮悬停动画效果的属性

transform − 这个属性允许你对一个元素进行缩放、旋转或平移。
opacity − 这个属性设置一个元素的透明度，其中1是完全可见，0是完全透明。
background-color − 这个属性设置一个元素的背景颜色。
color − 这个属性设置一个元素的文本颜色。
transition − 这个属性控制两种状态之间的动画效果，如默认状态和悬停状态。
bottom和top − 这些属性将一个元素相对于其容器定位。

使用CSS创建按钮悬停动画效果

按钮悬停动画效果是添加网站视觉效果的好方法。为了使用CSS创建按钮悬停动画效果，我们通常使用 :hover 伪类选择器与CSS过渡或关键帧动画相结合。通过以下步骤，我们可以轻松地创建按钮悬停动画效果。

第一步 −为粘性小球动画创建HTML代码
第二步 −向按钮添加CSS样式
第三步 −添加悬停动画效果

在本文中，我们将探讨三个示例来创建使用CSS的按钮悬停动画效果。

示例1 – 悬停时放大

在这个示例中，按钮将具有蓝色的背景颜色和白色的文本。当鼠标指针悬停在按钮上时，按钮将使用transform属性以平滑的过渡时间0.5秒放大20%，背景颜色将变为绿色。

<!DOCTYPE html>
<html>
<head>
   <style>
      Body{
         text-align:center;
      }
      .scale-up-btn {
         background-color: blue;
         color: white;
         padding: 10px 30px;
         margin:20px;
         border: none;
         transition: transform 0.5s ease;
         transform: scale(1);
         border-radius:10px;
      }
      .scale-up-btn:hover {
         transform: scale(1.2);
         background-color: green;
      }
   </style>
</head>
   <body>
      <h2>Button hover animation effect using CSS</h2>
      <h3>Scale Up on Hover effect</h3>
      <button class="scale-up-btn">Hover Me</button>
   </body>
</html>

示例2：鼠标悬停时淡入效果

在这个示例中，按钮将具有蓝色背景和白色文本，初始不透明度为0.5。当鼠标指针悬停在按钮上时，不透明度将以平滑的过渡效果增加到1，过程持续0.5秒。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .fade-in-btn {
         background-color: blue;
         color: white;
         padding: 10px 20px;
         margin:15px;
         border: none;
         opacity: 0.5;
         transition: opacity 0.5s ease;
      }
      .fade-in-btn:hover {
         opacity: 1;
      }
   </style>
</head>
   <body>
      <h2>Button hover animation effect using CSS</h2>
      <h3>Fade In Effect on Hover</h3>
      <button class="fade-in-btn">Hover Me</button>
   </body>
</html>

示例3：鼠标悬停时向上滑动

在这个示例中，按钮将具有蓝色背景和白色文本，并且其位置设为相对定位。bottom属性被设置为0，这意味着按钮位于其容器的底部。当鼠标指针悬停在按钮上时，bottom属性会增加到20px，导致按钮在0.5秒内以平滑的过渡效果向上滑动。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .slide-up-btn {
         background-color: blue;
         color: white;
         padding: 15px 30px;
         border: none;
         position: relative;
         bottom: 0;
         transition: bottom 0.5s ease;
         border-radius:10px;
      }
      .slide-up-btn:hover {
         bottom: 20px;
      }
   </style>
</head>
   <body>
      <h3>Slide Up Effect on Hover</h3>
      <button class="slide-up-btn">Hover Me</button>
   </body>
</html>