参考资料

  1. flex-direction: row/column示例
  2. 如何用Flex布局实现导航栏？
  3. 详细说明：justify-content: flex-start/end
  4. 有没有推荐的 CSS 过渡动画库？
  5. CSS弹性盒子详细说明以及案例
  6. css布局格式
  7. CSS有哪些预处理器？
  8. css阴影效果怎么设置
为按钮添加过渡动画效果主要通过 CSS 的 transition 属性实现。以下是具体步骤和示例：

一、基础过渡动画‌
1. 定义初始状态‌
css
Copy Code
.cart-btn {
  background-color: #FF6B6B;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  transition: all 0.3s ease; /* 关键：定义过渡属性 */
}

2. 添加状态变化‌

指定需要过渡的属性（如背景色、位移、阴影等）：

css
Copy Code
.cart-btn:hover {
  background-color: #FF5252;  /* 颜色过渡 */
  transform: translateY(-2px); /* 位移过渡 */
  box-shadow: 0 6px 8px rgba(0,0,0,0.2); /* 阴影过渡 */
}

二、进阶控制‌
1. 指定特定属性过渡‌

如果只需部分属性有动画，替换 all 为具体属性名：

css
Copy Code
.cart-btn {
  transition: 
    background-color 0.3s ease,
    transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

2. 时间函数（缓动曲线）‌

通过 cubic-bezier 自定义动画节奏：

css
Copy Code
.cart-btn {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

三、完整示例‌
html
Copy Code
<button class="cart-btn">立即购买</button>

css
Copy Code
.cart-btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  
  /* 过渡设置 */
  transition: 
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
}

.cart-btn:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.cart-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
}

四、常见过渡效果‌
效果类型	适用 CSS 属性	示例值
颜色变化	background-color, color	background-color 0.3s ease
位移动画	transform	transform 0.2s ease-out
尺寸变化	width, height	width 0.4s cubic-bezier()
阴影动画	box-shadow	box-shadow 0.3s linear
五、注意事项‌

性能优化‌
优先使用 transform 和 opacity（硬件加速性能更优），避免过渡 margin/padding。

初始状态设置‌
确保过渡属性定义在元素的默认状态（而非 :hover 等伪类中）。

兼容性‌
添加浏览器前缀（如 -webkit-transition）适配旧版浏览器。

通过合理配置 transition，可以让按钮交互更流畅自然，提升用户体验。