CSS模拟hover时图片只显示一半的动画解决方案

CSS模拟hover时图片只显示一半的动画解决方案_第1张图片

1、下面的部分用白底div来装,hover时改变div的高

2、使用图片剪裁

position: absolute;

clip: rect(0px,380px,150px,0px);  /* 剪裁成矩形尺寸为 rect (top, right, bottom, left)*/

.menu4__items:hover .menu4__items__icon{

/* height: 160px;

width: 380px; */

/*clip可以显示*/

position: absolute;

clip: rect(0px,380px,150px,0px);

left: 0;

}

3、学习新概念CSS3 object-position/object-fit图片处理

https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

CSS模拟hover时图片只显示一半的动画解决方案_第2张图片

CSS模拟hover时图片只显示一半的动画解决方案_第3张图片

CSS模拟hover时图片只显示一半的动画解决方案_第4张图片

 

你可能感兴趣的:(html/css,html,css,特效)