刚才做了个任务 需要实现鼠标悬停到图片上 图片同时向上向下延长一点
hover里将height变长以后图片只是向下伸展
搜了很多信息也没有找到有没有参数可以实现上下同时伸长
于是想了个办法
用transformer:translatedy(-50px);
实现了同时向上向下延展
原理是图片会同时进行向上移动和向下伸展的动画，所以看到的是同时伸展
.img {height: 300px;width: 260px;display: inline-block;background-size: cover;background-repeat: no-repeat;background-position: center;
}.img:hover {height: 350px;transition: 0.5s;transform:translateY(-25px);
}
tips:当时想的是向上移动的距离和总体增长的距离的比例最好保持1:2 否则两个方向延长的速度可能会看起来不协调