CSS 鼠标悬停图片同时向上下伸长的方法
刚才做了个任务 需要实现鼠标悬停到图片上 图片同时向上向下延长一点
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 否则两个方向延长的速度可能会看起来不协调
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！