Html 实现手风琴效果

html简单实现手风琴效果

这是加载页面的效果
这是鼠标悬停的效果
鼠标悬停哪一张图片也会相对应的展开(下面是代码,图片自己找几张放上去,路劲修改成自己的就可以了)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 900px;
            height: 280px;
            border: 1px solid;
            margin: 50px auto;
            overflow: hidden;
        }
        ul li{
            width: 100px;
            height: 200px;
            float: left;
            transition: width 0.5s;
        }

        ul li img{
            width: 400px;
            height: 280px;
        }
        ul:hover li{
            width: 100px;
        }
        ul li:hover{
            width: 400px;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="../images/ad7.jpeg" alt=""></li>
        <li><img src="../images/ad8.jpg" alt=""></li>
        <li><img src="../images/ad9.jpeg" alt=""></li>
        <li><img src="../images/ad10.jpg" alt=""></li>
        <li><img src="../images/ad11.jpg" alt=""></li>
        <li><img src="../images/ad12.jpg" alt=""></li>
    </ul>
</body>
</html>
  • 3
    点赞
  • 49
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现手风琴效果,你可以使用CSS的过渡效果和伪类来实现。以下是一个简单的示例: HTML结构: ```html <div class="accordion"> <div class="accordion-item"> <div class="accordion-header">标题1</div> <div class="accordion-content">内容1</div> </div> <div class="accordion-item"> <div class="accordion-header">标题2</div> <div class="accordion-content">内容2</div> </div> <div class="accordion-item"> <div class="accordion-header">标题3</div> <div class="accordion-content">内容3</div> </div> </div> ``` CSS样式: ```css .accordion { width: 300px; } .accordion-item { border: 1px solid #ccc; } .accordion-header { background-color: #f7f7f7; padding: 10px; cursor: pointer; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .accordion-item.active .accordion-content { max-height: 500px; /* 设置一个足够高的值,以展开内容 */ } ``` JavaScript代码(可选): ```javascript const accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { item.addEventListener('click', () => { item.classList.toggle('active'); }); }); ``` 这个示例中,`.accordion` 是手风琴的容器,`.accordion-item` 是每个手风琴项,`.accordion-header` 是标题,`.accordion-content` 是内容。通过给手风琴项添加 `.active` 类来控制内容的展开和收起。 你可以根据实际需求调整样式和动画效果,这只是一个简单的示例供参考。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值