css实现列表局部放大和压缩效果

不废话先看效果

1111.gif

代码分析

布局和js代码

css样式

放大效果主要是通过.temp:hover中的transform: scale(1.3,1.3);实现，不多解释
看一下压缩效果的实现方式
首先列表容器样式.content

display: flex;
margin: 100px;
flex-direction: column;
justify-content: space-between;

列表容器设置了justify-content: space-between;样式
在子项的hover样式中调整padding，子项的高度变大，使列表容器的空白空间变小，所以其他子项会向上或向下移动，距离鼠标所在子项越近位移就越明显，所以视觉上会有压缩效果

完整代码