服务器之家
您的位置： 首页 编程语言 css

html5+css3实现组图手风琴效果

100人浏览   2024-11-22 09:49:46

效果图（不会截取网页gif动图）

另外写了一个效果拼图

步骤如下：

一、每一张图片放在一个div中，然后用另一个div容器包裹了所有的图片div。

html代码：

<!------------ 第六个图片盒子开始 ------------><div class="box6">

<div class="item"><img src="./images/mi1.jpg" alt="" /></div>

<div class="item"><img src="./images/mi2.jpg" alt="" /></div>

<div class="item"><img src="./images/mi3.jpg" alt="" /></div>

<div class="item"><img src="./images/mi4.jpg" alt="" /></div>

<div class="item"><img src="./images/mi1.jpg" alt="" /></div>

<div class="item"><img src="./images/mi2.jpg" alt="" /></div>

</div>

二、图片正常横排平均显示，在鼠标放到一个图上时还图片展开显示全部，其余图片变窄挤到一起。

css样式：

/* -----六栏box6图片手风琴盒子------ */

.box6{

margin: 0 auto;

display: flex;/* 弹性布局盒子 */

width: 1190px;

height: 480px;

justify-content: space-around;/* 弹性布局盒子当中项目位于各行间、前后都留有空白的容器内 */

align-items: center;/* 弹性布局当中盒子位置垂直居中 */

}

.box6 .item{

float: left;

width: 197px;

height: 475px;

border: 1px solid #999;

border-radius: 5px;/* 边角弧度值 */

overflow: hidden;/* 隐藏多余部分 */

transition: all 1s;/* 过渡时间为1秒 */

cursor: pointer;/* 鼠标指向时的形状 */

}

.box6:hover .item{/* 鼠标划过这个项目时其他项目变窄了 */

width: 119px;

}

.box6 .item:hover{/* 鼠标划过这个项目时变宽了 */

width: 700px;

}

相关推荐