CSS简单图片手风琴展示效果。
这么丝滑的效果一点js都不要，不要命了。打开VSCode，页面结构就是ul+litimg，没有任何花里胡哨。为了方便计算，ul总宽度设为550px，每个li均沾ul宽度的五分之一，图片宽度则为450px。
宽度说出来了肯定有聪明的小伙伴知道接下来要干什么了，没错就是在鼠标hover的时候改变一下li的宽度。比如这一刻，只要让第一个li变成450px宽，其他li变为25px宽，是不是正好凑满了总宽度550px？其他情况也同理。代码真的很好写，两个hover完事。
第一个hover给ul，让它把所有li变成25px。第二个hover给li，让它把自己变宽。就这么简单完事了，再见。
记得点赞关注我。