演绎手风琴效果

为了展现手风琴效果，我自己写了个简单的dome

1、首先是对内容的选取，我选择了自己经常玩的游戏角色图片当作图片元素，图片数量为6张。

2、其次对页面的布局，在页面上方写个标题：“我的角色秀”，可以根据个人喜好设置标题背景以及文字颜色（我设置的是渐变的背景色）。然后在标题下方写一个div盒子（900*500，border为1px），用css3对其设置属性，以此来达到想要的效果。在设置之前可以用通配符（*）先去除整个内容内标签所自带的margin和padding（即设置其属性等于0）。

 *{
            padding:0;
            margin: 0;
        }

3、既然是手风琴效果，那么就是横向的展示排版，这个时候要优先考虑ul和li标签，ul下包裹6个li标签（也可以在编辑器写为ul>li*6，然后按下Tab键）。接着就是对ul标签的属性设置。

ul{
            list-style: none;

        }
 ul>li{
            float: left;
            width: 150px;
            height: 500px;
          /*过渡模块，width表示被更改的属性，1s是过渡时间，linear表示匀速*/
            transition: width 1s linear;
        }

4、ul标签上的属性进行编写，整体ul内每一个li标签的宽度减小，然后再针对li标签进行宽度的拉伸。

ul:hover li{
                 width: 60px;
            }
ul li:hover{
                width: 600px;
           }

5、由于我找的图片大小不一，所以需要对img单独设置width和height，如果你们找的图片是一样的尺寸，即可免去这一步。

6、附上效果展示链接：https://exploringfly.github.io/accordion/。

7、我将css代码和html代码放在一起展示如下：

    
    
    


我的角色秀