答案：CSS中通过transition与border-radius结合可实现圆角平滑动画，如按钮悬停变圆形或头像呼吸效果，需设置起始结束状态并使用百分比值，推荐cubic-bezier缓动曲线优化视觉体验。
在CSS中，过渡（transition）与 border-radius 结合使用，可以实现元素圆角的平滑动画效果。这种技术常用于按钮悬停、卡片交互等视觉增强场景，让界面更生动自然。
基本原理
通过设置 transition 属性，控制 border-radius 的变化过程，使圆角从一个值渐变到另一个值。关键点是：必须预先定义起始和结束状态的圆角值，并启用过渡动画。例如，一个方形按钮在鼠标悬停时变为圆形：
.rounded-box {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 10px;
transition: border-radius 0.4s ease;
}
.rounded-box:hover {
border-radius: 50%;
}实现技巧与注意事项
为了让圆角动画更自然，需注意以下几点：-
使用百分比而非固定像素：当元素宽高相等时，
border-radius: 50%可生成完美圆形，兼容性更好。 -
统一所有角的过渡：若只修改某个角（如
border-top-left-radius），需单独设置该属性的过渡，否则不会生效。 - 避免突然跳变：确保初始状态和目标状态的 border-radius 值合理，防止动画过程中出现抖动或锯齿。
-
性能优化：圆角动画涉及重绘，复杂页面中建议限制动画频率或使用
will-change: border-radius提前告知浏览器。
实用示例：圆形头像悬停放大
常见于用户头像或社交组件，鼠标移入时圆角扩大，呈现“呼吸感”：.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: url('face.jpg') center/cover no-repeat;
transition: border-radius 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.avatar:hover {
border-radius: 20%;
}这里使用 cubic-bezier 调整缓动曲线，使动画更柔和。
基本上就这些。只要掌握 transition 和 border-radius 的配合方式，就能轻松做出流畅的圆角动画。
立即学习“前端免费学习笔记（深入）”；
