🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS按钮效果：鼠标悬停时使用scale()实现轻微放大

📝 用途

此模板用于当鼠标悬停在按钮上时，给按钮添加轻微放大的效果。

📘 解释

此代码使用 transform: scale() 来实现鼠标悬停时轻微放大按钮的效果。transition 属性确保了平滑的过渡效果。

🔹 部分代码

<style>
  .hover-scale-btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .hover-scale-btn:hover {
    transform: scale(1.1); /* 悬停时轻微放大 */
  }
</style>

💻 完整代码

<button class="hover-scale-btn">
  悬停时轻微放大的按钮
</button>

<style>
  .hover-scale-btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .hover-scale-btn:hover {
    transform: scale(1.1); /* 悬停时轻微放大 */
  }
</style>
已复制！

✨ 放大效果的实用技巧

悬停时的放大效果不仅适用于按钮，也可以广泛应用于各种元素。通过调整 transform: scale() 的数值，可以灵活设置从 scale(1.05) 的微小放大到 scale(1.5) 的显著放大等不同效果。

⏱ 动画过渡的调整

如果希望更改动画的速度，可以使用 transition 属性进行控制。例如，transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 可实现更具动感的动画效果。借助 cubic-bezier 函数，还可以自定义过渡曲线。

🎯 复合效果

将放大与其他效果结合使用可以实现更丰富的表现形式。例如，transform: scale(1.1) rotate(5deg); 可在放大的同时轻微旋转元素。若希望在变换时也改变背景色，可写作：transition: transform 0.3s ease, background-color 0.3s ease;

请注意，如果放大倍数过大（如 scale(1.5) 以上），可能会与周围元素重叠或导致布局错乱。此外，transform 属性不会影响元素原本所占空间，因此适合用于不干扰周边布局的动画。

此技巧适用于卡片式 UI 的缩略图、导航菜单项、商品列表等所有需要吸引用户注意的交互元素。适当添加动态效果可以有效提升网站的整体用户体验。

相关模板