效果 1 2 3 4 6 css.sfq-wrap { width: 100%; min-width: 400px; margin: 100px auto; ul, li { padding: 0; margin: 0; list-style: none; } .list { display: flex; overflow: hidden; justify-content: flex-start; align-items: flex-start;> li { display: flex; justify-content: center; align-items: center; position: relative; padding: 10px; height: 500px; width: 600px; transition: width .5s; font-size: 18px; font-weight: bold; color: #fff; background-position: center; background-size: 500px; background-repeat: no-repeat; will-change: width; &:not(:hover) { width: 20%; } > p { margin: 0; position: relative; z-index: 1; }}}} <section class="sfq-wrap"> <ul class="list"> <li class="list"> <p class="text">1</p> </li> <li class="list"> <p class="text">2</p> </li> <li class="list"> <p class="text">3</p> </li> <li class="list"> <p class="text">4</p> </li> <li class="list"> <p class="text">6</p> </li> </ul></section>