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

css动画与border-radius圆角变化

P粉602998670

发布： 2025-10-25 13:00:02

原创

856人浏览过

border-radius可通过transition或@keyframes实现圆角动画，常用于悬停、加载等交互场景。示例包括:hover时从10px到50%的过渡，或关键帧循环变化产生呼吸效果，现代浏览器支持良好，但需注意单位统一、边框阴影同步及移动端性能影响。

css动画与border-radius圆角变化

在CSS动画中，border-radius 属性可以用来创建圆角，并且支持通过动画实现动态的圆角变化。这种效果常用于按钮悬停、加载状态或卡片翻转等交互场景中，让界面更生动。

border-radius 的基本作用

border-radius 用于设置元素的圆角程度，可以是一个值（四个角相同），也可以是多个值分别控制每个角。例如：

.box {
  border-radius: 10px;
}
.round {
  border-radius: 50%; /* 完全圆形 */
}

登录后复制

使用 CSS 动画改变圆角

你可以通过 @keyframes 或 transition 来实现 border-radius 的平滑变化。

示例：用 transition 实现鼠标悬停时的圆角变化

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

.animated-box {
  width: 100px;
  height: 100px;
  background: #3498db;
  border-radius: 10px;
  transition: border-radius 0.5s ease-in-out;
}
<p>.animated-box:hover {
border-radius: 50%;
}</p>

登录后复制

当鼠标移到元素上时，圆角会从 10px 平滑过渡到 50%，形成一个圆形。

AI角色脑洞生成器

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

176

查看详情

关键帧动画实现复杂圆角变化

如果需要更复杂的圆角变化节奏，可以使用 @keyframes：

@keyframes pulse-radius {
  0% {
    border-radius: 10px;
  }
  50% {
    border-radius: 25%;
  }
  100% {
    border-radius: 10px;
  }
}
<p>.pulsing-box {
width: 80px;
height: 80px;
background: #e74c3c;
animation: pulse-radius 2s infinite;
}</p>

登录后复制

这个例子会让元素的圆角在 10px、25% 之间循环变化，产生“呼吸”般的效果。