如何在CSS材质设计中实现运动

我尽量尊重材料设计准则。但我不知道如何产生这种效果：

如何模拟从一个元素到另一个元素的平滑变换。就像一个按钮到一块。我正在努力进行元素定位。绝对定位和响应性设计开始成为一场噩梦，相对或柔性定位和元素不会相互堆叠，使动画扫视

---

有什么想法吗？即使这是一个一般性问题，我也会使用带有柔性布局的角度材质框架。因此，任何能够解决这一问题的解决方案都将不胜感激

如果基本布局是flex，您可以这样做

.集装箱{ 宽度：600px； 高度：300px； 位置：相对位置； 边框：实心1px绿色； 显示器：flex； 证明内容：周围的空间； 对齐项目：居中； 指针事件：无； } .按钮{ 宽度：50px； 高度：50px； 背景色：青色； 边界半径：50%； 过渡：所有1； 指针事件：自动； } .容器。按钮：悬停{ 宽度：100%； 身高：100%； 边界半径：0%； 不透明度：1； } .容器：悬停分区{ 宽度：0%； 身高：0%； 不透明度：0； }

---

请检查这一点，我不想要一个图书馆，提出所有在一个组成部分。我已经使用了棱角材料。我正在css中寻找一种方法来轻松处理变形效果，以在圆形按钮和边栏形状之间进行自定义平滑过渡。