CSS 实现跳动的方块动画

1.实现效果

2.实现步骤

• 定义css变量：正方形长/宽为w；

:root {--w: 30px;
 } 

• 父容器为一个圆角正方形，添加box-shadow阴影，设置transform-style: preserve-3d，让转换的子元素保留3D转换

<div class="container"></container> 

 .container { height: 150px; width: 150px; padding: 30px; box-shadow: 0 12px 20px 6px rgb(104 112 118 / 0.2); border-radius: 15px; transform-style: preserve-3d;
 } 

• 父元素设置box-sizing: border-box* 在此容器内，添加9个正方形并设置transform-style: preserve-3d，长/宽为w,按照这样的布局，改写父容器的大小，正方形平均分布，父元素设置flex横向布局，超出换行

 <div class="container"><div class="square"></div>	...// 共9个<div class="square"></div></div> 

 .container {
 - height: 150px;
 - width: 150px;
 - padding: 30px;
 - border-radius: 15px;
 + height: calc(var(--w) * 5);
 + width: calc(var(--w) * 5);
 + padding: var(--w);
 + border-radius: calc(var(--w) / 2);
 + disp