点击滑过放大效果技巧

先来看个案例效果

点击滑过放大效果技巧_第1张图片
默认不动

看滑动后效果

点击滑过放大效果技巧_第2张图片
滑动后效果

滑动前和滑动后明显的图片的可视大小改变

思路分析:

1、图像嵌套在盒子里,设置图像和盒子等大

2、给盒子添加滑动效果    div:hover{}

3、滑过是,图片放大  transform: scale (1.5);

4、transtion  执行缓动时间 2S

至此滑动后,图片超出盒子范围,所以在盒子元素重添加   overflow:hidden;


点击滑过放大效果技巧_第3张图片

你可能感兴趣的:(点击滑过放大效果技巧)