创建CSS手风琴效果-优快云博客

本文链接：https://blog.youkuaiyun.com/exploringfly/article/details/78650578

这篇博客介绍了如何使用CSS实现手风琴效果，通过选择游戏角色图片作为内容，利用ul和li标签进行布局，并通过CSS3的过渡效果实现动态展示。作者分享了详细步骤，包括设置标题样式，调整图片尺寸，以及关键的CSS和HTML代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

`2、其次对页面的布局，在页面上方写个标题：“我的角色秀”，可以根据个人喜好设置标题背景以及文字颜色（我设置的是渐变的背景色）。然后在标题下方写一个div盒子（900500，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代码放在一起展示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <style>
        *{
            padding:0;


            margin: 0;
        }
        h1{
            text-align: center;
            color: #c650ff;
            background:linear-gradient( to right,pink,skyblue);
            font-family:"楷体";
        }
        div{
            width: 900px;
            height: 500px;
            /*border: 1px solid #0AA770;*/
            overflow: hidden;
            transition: width 5s linear;
            margin: 50px auto;

        }
        div ul{
            list-style: none;

        }
        ul>li{
            float: left;
            /*background-color: #2d56ff;*/
            width: 150px;
            height: 500px;
            transition: width 1s linear;
        }
        ul img{
            width: 600px;
            height: 500px;

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

    </style>
</head>
<body>
<h1>我的角色秀</h1>
<div>
    <ul>
        <li><img src="img/timg.jpg" alt=""></li>
        <li><img src="img/timg%20(1).jpg" alt=""></li>
        <li><img src="img/timg%20(3).jpg" alt=""></li>
        <li><img src="img/timg%20(4).jpg" alt=""></li>
        <li><img src="img/timg%20(5).jpg" alt=""></li>
        <li><img src="img/timg%20(6).jpg" alt=""></li>
    </ul>
</div>
</body>
</html>