css border-radius与transition结合动画效果-css教程-PHP中文网

css border-radius与transition结合动画效果

P粉602998670

发布： 2025-10-04 20:04:02

原创

582人浏览过

border-radius与transition结合可实现圆角平滑动画，如hover时方块变圆形，通过设置transition控制过渡时间、缓动函数及属性范围，避免使用all以减少性能影响，建议保持宽高一致并用50%实现稳定圆形过渡。

css border-radius与transition结合动画效果

在CSS中，border-radius 与 transition 结合可以实现非常平滑的形状动画效果，比如按钮圆角缩放、图片hover变圆形等。关键在于设置过渡属性，让圆角变化过程更自然。

基本用法：hover时改变圆角

通过给元素设置 transition 属性，可以让 border-radius 在状态切换时产生动画效果。

示例：

.box {
  width: 100px;
  height: 100px;
  background: #3498db;
  border-radius: 10px;
  transition: border-radius 0.3s ease;
}

.box:hover {
  border-radius: 50%;
}

登录后复制

鼠标悬停时，方块的圆角会平滑过渡为完全圆形。

立即学习“前端免费学习笔记（深入）”；

控制过渡的节奏和范围

你可以调整 transition 的参数来控制动画表现：

BibiGPT-哔哔终结者

B站视频总结器-一键总结音视频内容

查看详情

时间：如 0.5s 比 0.3s 更慢更柔和
缓动函数：使用 ease-in、ease-out 或 cubic-bezier() 定制加速度
指定属性：写 transition: border-radius 避免影响其他样式动画

例如：

.box {
  transition: border-radius 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

登录后复制

结合其他属性实现复合动画

你也可以同时过渡多个属性，比如宽度、背景色和圆角：

.card {
  width: 120px;
  height: 120px;
  background: #e74c3c;
  border-radius: 15px;
  transition: all 0.4s ease;
}

.card:hover {
  width: 140px;
  height: 140px;
  border-radius: 20px;
  background: #c0392b;
}

登录后复制

注意：使用 all 要谨慎，可能影响性能或造成意外动画。