css animation与border-radius圆角变化-css教程-PHP中文网

css animation与border-radius圆角变化

P粉602998670

发布： 2025-10-17 14:14:02

原创

1015人浏览过

使用CSS动画可实现border-radius平滑变化，通过@keyframes定义从0或小值到50%的圆角过渡，配合animation-timing-function控制缓动，适用于按钮悬停、加载动画等场景。

css animation与border-radius圆角变化

在使用 CSS Animation 时，如果希望元素的 border-radius 发生平滑变化（比如从方形变为圆形），可以直接通过 @keyframes 来定义圆角的变化过程。现代浏览器对 border-radius 的动画支持良好，只要属性值是可计算的（例如从 0 到 50%），就能实现流畅过渡。

如何实现 border-radius 动画

要让圆角在动画中变化，只需在关键帧中设置不同的 border-radius 值。

起始状态设置较小或为 0 的圆角
结束状态设置较大的圆角（如 50% 实现圆形）
配合 animation-timing-function 控制缓动效果

示例代码：

<style>
.animated-box {
  width: 100px;
  height: 100px;
  background: #3498db;
  border-radius: 10px;
  margin: 50px auto;
  animation: roundAnimate 2s ease-in-out infinite alternate;
}

@keyframes roundAnimate {
  from {
    border-radius: 10px;
  }
  to {
    border-radius: 50%;
  }
}
</style>

<div class="animated-box"></div>

登录后复制

常见应用场景

这种动画常用于按钮悬停、加载图标变形、卡片交互反馈等视觉增强场景。

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

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

悬停时从直角变圆角：hover 触发动画或配合 transition
无限循环动画营造呼吸感
与 transform 联动，实现更丰富的形变效果

用 transition 实现鼠标交互示例：

<style>
.button {
  padding: 15px 30px;
  background: #e74c3c;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: border-radius 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.button:hover {
  border-radius: 20px;
}
</style>

<button class="button">悬停看变化</button>

登录后复制