形态变换

元素通过 border-radius、width、height 等属性的过渡，从一种形状平滑变形为另一种形状，实现有机的形态变换效果。

实时预览

圆→方

圆→胶囊

有机变形

代码

css

/* 圆形变方形 */
.morph-circle-to-square {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.morph-circle-to-square:hover {
  border-radius: 8px;
  transform: rotate(45deg);
}

/* 圆变胶囊 */
.morph-pill {
  width: 80px;
  height: 80px;
  border-radius: 60px;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.morph-pill:hover {
  width: 140px;
  border-radius: 12px;
}

/* 有机变形 */
.morph-organic {
  border-radius: 20% 80% 80% 20% / 20% 20% 80% 80%;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.morph-organic:hover {
  border-radius: 80% 20% 20% 80% / 80% 80% 20% 20%;
  transform: rotate(180deg);
}

html

<div class="morph-circle-to-square">圆→方</div>
<div class="morph-pill">圆→胶囊</div>
<div class="morph-organic">有机变形</div>

纯 CSS 实现的形态变换过渡动画效果——通过 transition 属性在两个状态之间平滑切换。适用于页面元素显示/隐藏、弹窗、Tab 切换等场景。

快速使用

复制 CSS 代码到你的样式文件中
给目标元素添加初始状态样式（opacity: 0; transform: ... 等）
通过 JavaScript 添加/移除类名触发过渡动画
调整 transition-duration 和 transition-timing-function 控制动画效果

使用场景

页面路由切换：淡入/滑动过渡让页面跳转更流畅
弹窗/对话框：缩放弹出+遮罩淡入营造前后层级关系
内容展开/折叠：过渡动画让内容区域的显示隐藏更自然
Tab 切换：裁剪揭示或滑动效果让标签页切换有方向感

常见问题

Q: transition 和 animation 应该用哪个？ A: 简单规则：两个状态之间的过渡用 transition（hover、类切换）；复杂的多阶段动画用 animation（loading、背景动画、循环动画）。transition 代码更少、性能更好。

Q: 为什么我的 transition 没有动画效果？ A: 常见原因：1) 起始状态没有设置目标属性值；2) 属性值类型不匹配（如 auto 到具体值不会过渡）；3) display: none 到 display: block 不会过渡。用 opacity + visibility 代替 display 变化。

Q: 如何让过渡看起来更自然？ A: 使用 cubic-bezier() 自定义缓动曲线。进入动画用 ease-out（快→慢），离开动画用 ease-in（慢→快）。Material Design 推荐的缓动值：cubic-bezier(0.4, 0.0, 0.2, 1)。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	⚠️ 基础 transition 可用，部分属性过渡不支持

使用说明

属性	说明
`border-radius: 50%`	完美圆形
`border-radius: 8px`	轻微圆角方形
`border-radius: 20% 80% ...`	8 值语法创造有机形状
`width` 变化	圆→胶囊的宽度拉伸
`cubic-bezier`	弹性曲线让变形有生命感

提示： border-radius 的 8 值语法格式为 水平半径1 水平半径2 水平半径3 水平半径4 / 垂直半径1 垂直半径2 垂直半径3 垂直半径4，可以创造出类似 blob 的有机形状。transition: all 让所有可动画属性同步过渡。

形态变换 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐