IWIW
  • Guide
  • 布局
  • 前端架构
  • 特效
  • 组件
⌘ K
Light mode
特效
抖动
推开
吃豆人
小球自由落体
小球碰撞
小球左右弹跳
弹幕
拖动排序
惯性拖动
水波纹 Ripple
橡皮筋拉伸
鼠标尾迹
抽屉
最后更新时间：
Copyright © 2026 | Powered by dumi
‌
‌
‌
‌

使用场景

代码演示

原理

推开效果，即一个元素的尺寸变化，推开另外一个元素。在折叠面板、侧边栏展开、评论/回复框展开中常用到。

难点是如何推开其它元素。可以使用 CSS height, margin, padding, 让盒子的高度从 0 开始变得，再使用 transition 控制过渡效果

需要和覆盖（Overlay）效果相区别，元素是浮在其它元素上面，不影响其他内容。

header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

header 3

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.