html+css3 过渡模块-手风琴效果

最新推荐文章于 2025-05-23 22:37:05 发布

老张谋

最新推荐文章于 2025-05-23 22:37:05 发布

阅读量722

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： html css web 过度模块手风琴效果

本文链接：https://blog.youkuaiyun.com/wgf5845201314/article/details/88060978

前端技术专栏收录该内容

111 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的手风琴效果，通过调整元素宽度并利用过渡动画，当鼠标悬停在列表项上时，该项会平滑地扩展，而其他项则相应收缩。这种效果常用于网站导航或展示多个选项的界面设计中。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>167-过渡模块-手风琴效果</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            width: 960px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
            overflow: hidden;
        }
        ul li{
            /*水平排版*/
            float: left;
            list-style: none;
            width: 160px;
            height: 300px;
            background-color: red;
          /*border: 1px solid #000;
            box-sizing: border-box;*/
        }
        ul:hover li{
            width: 100px;
            transition-property: width;
            transition-duration: 0.5s;
        }
        ul li:hover{
            width: 460px;

        }
    </style>
</head>
<body>
<ul>
    <li><img src="ad1.png" alt=""></li>
    <li><img src="ad2.png" alt=""></li>
    <li><img src="ad3.png" alt=""></li>
    <li><img src="ad4.png" alt=""></li>
    <li><img src="ad5.png" alt=""></li>
    <li><img src="ad6.png" alt=""></li>
</ul>
</body>
</html>