效果图：
小伙伴们需要对CSS过渡-Transitions和前面的基础知识有一定了解
你可以拿你自己的图片放进去：
小伙伴们我没有截取动图的软件，不能给你们看动图啦
鼠标没有点击之前：
鼠标点击图片时：
效果如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;list-style: none;}ul{width: 1000px;height: 300px;border: 1px solid;margin: 50px auto;overflow: hidden;}ul li{width: 150px;height: 300px;/* 设置浮动后清---除浮动 */float: left;/* 默认移动方式 */transition: width 0.5s;}/* html文档执行顺序是自上而下的，所以你想让那个样式先生效 *//* 保险起见 */ul:hover li{width: 100px;}/* 鼠标移入 图片变为400 */ul li:hover{width: 400px;}</style></head><body><ul><li><img src="../images/ad7.jpeg" alt=""></li><li><img src="../images/ad8.jpg" alt=""></li><li><img src="../images/ad9.jpeg" alt=""></li><li><img src="../images/ad10.jpg" alt=""></li><li><img src="../images/ad11.jpg" alt=""></li><li><img src="../images/ad12.jpg" alt=""></li></ul></body></html>
