用html-css的方式写手风琴图片

最新推荐文章于 2024-08-06 21:02:26 发布

Mia_03

最新推荐文章于 2024-08-06 21:02:26 发布

阅读量420

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/Mia_03/article/details/130995561

版权

效果如下：

首先用html简单做7个li

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

然后加入css

<style>
         /*清除内外边距  */

        * {
            margin: 0;
            padding: 0;
        }

        ul {
            /* 设置ul的宽高 */
            width: 1000px;
            height: 250px;
            margin: 100px auto;
            /* 去掉li前面的小圆点 */
            list-style: none;
            /* 让li横向排布 */
            display: flex;
        }

        li {
             /* 设置li的宽度 */
            width: 200px;
             /* 过渡 */
            transition: all 1s;
             /* 可以在这里放入背景图或者颜色，这里用边框代替 */
            border: 1px solid #000;
        }
        
        li:hover {
             /* 鼠标移入效果 li宽度变大 flex-shrink为0 避免图片显示不完整 */
            width: 400px;
            flex-shrink: 0;
        }
      
    </style>

运行结果：