悬停列表项放大，其余项自动缩小退让
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .lst{max-width:420px;margin:26px auto;list-style:none;padding:0;transition:.3s}
.fx .lst .item{padding:16px 20px;margin:8px 0;border-radius:10px;background:#161b22;border:1px solid #2d3748;cursor:pointer;transition:transform .3s,opacity .3s,background .3s;color:#e6edf3}
.fx .lst .item:hover{transform:scale(1.03);background:rgba(74,158,255,.16)}
.fx .lst:has(.item:hover) .item:not(:hover){transform:scale(.97);opacity:.55}<div class="fx">
<ul class="lst"><li class="item">列表项 A —— 悬停我</li><li class="item">列表项 B</li><li class="item">列表项 C</li><li class="item">列表项 D</li></ul>
</div>