长沙网站开发教您如何通过弹性布局实现简单的手风琴效果

在一个页面内有四张并排的图片,因为空间不足只能让一张图片展示完全,另外几张只能展示一部分.

在这时,我们为了让其他几张图片也能完全展示,一般会使用JS做一个手风琴效果:每当鼠标移动到图片上时,让这张图片渐渐展开,然后再让已经展开的图片收拢.这样既达到了摆放图片的目的,也在页面上增加了一个交互效果,让页面更丰满.

这样的方法当然是很好的,不过今天,长沙网站建设可以教您一个更加简单的实现方式,不使用JS,只需使用CSS即可实现这种效果.

核心属性:flex,transition.

首先我们将包裹图片的DIV设置为 display:flex; 弹性布局,然后将四张图片的flex设置为1,这样整个空间就被均匀分成四份,每张图片都会显示1/4部分.

为了图片变化时更平滑,再添加上过渡属性,设置为 transition: all 700ms;

最后为图片添加:hover属性:

div img{flex:1;width:100%;height:100%;}
div img:hover{flex: 0 0 50%;}

意思是当长沙网站设计将鼠标移入图片时,这张图片的宽度从与其他图片均分整个DIV的宽度,变为直接占据50%的宽度,将整个内容显示出来.而其他的图片则会变得更小,均分剩下50%的宽度.鼠标移出时,这张图片的宽度又会缩回来,变回与其他图片一样的大小.实现了我们想要的效果

效果视频展示:

以上就是长沙网站制作整理出的手风琴效果的实现方法,简单一行代码就可以实现以前需要使用JS才能实现的页面效果，希望对您有所帮助!