一、效果
默认如下图，五个子元素平分容器宽度。
鼠标移入任意一个子元素，宽度变大，剩下子元素等分容器剩下宽度
二、思路
默认情况：五个子元素，display：inline-block。宽度为容器的20%，高度为容器高度。
效果情况：hover容器的时候每一个子元素宽度都变为10%；
hover子元素的时候，当前子元素宽度变为60%；
为了实现过渡的效果，会给容器子级一个过渡时间，
注意：当鼠标快速移动，容器最右边会有空白区出现。这是因为有时间过渡，子级没来得及达到最大的宽度。
解决办法：容器display：table；子级display：table-cell；
标题部分（span）：相对于子级定位（div1-5）
body 代码：
一、效果 默认如下图，五个子元素平分容器宽度。 鼠标移入任意一个子元素，宽度变大，剩下子元素等分容器剩下宽度 二、...
昨天在做一个旅游页面的项目，前端页面实现的过程中遇到这样一个需求。需要把一组图片形成手风琴的展示效果。认真的思考一...
css3手风琴菜单 2d过渡照片墙 css3二级菜单
纯CSS打造绚丽边框
纯CSS实现视差滚动效果
原文来自 @幸福的彼岸 copied by Dylan. 2016-7
css图形绘制合集（纯CSS外加一个div标签实现） 相关CSS代码： #square { width: 100...
效果图： 这种效果纯css也是可以实现的，点这里就能看到纯css写的 ?但是用animejs你会发现方便很多，下面...
前端特效01：使用纯CSS实现书籍3D翻页效果 前端特效02：使用纯CSS实现动态太极 前端特效03：HTML5画...
本文标题：纯css 手风琴
本文链接：https://www.haomeiwen.com/subject/fobvjxtx.html
网友评论