<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="https://code.5g-o.com/wp-content/uploads/2020/09/style-5.css"> </head> <body> <div class="container"> <img src="https://code.5g-o.com/wp-content/uploads/2020/09/img.jpg" alt="" class="image"> <div class="accordion-menu"> <div class="item" id="item1"> <a href="#item1" class="title"> <span>Lorem ipsum dolor sit amet?</span> <i class="icon"></i> </a> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque? </p> </div> <div class="item" id="item2"> <a href="#item2" class="title"> <span>Lorem ipsum dolor sit amet?</span> <i class="icon"></i> </a> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque? </p> </div> <div class="item" id="item3"> <a href="#item3" class="title"> <span>Lorem ipsum dolor sit amet?</span> <i class="icon"></i> </a> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque? </p> </div> <div class="item" id="item4"> <a href="#item4" class="title"> <span>Lorem ipsum dolor sit amet?</span> <i class="icon"></i> </a> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo temporibus possimus expedita optio magni maiores impedit inventore iusto accusantium doloremque? </p> </div> </div> </div> </body> </html>
*{ margin: 0; padding: 0; font-family: "Open Sans", sans-serif; box-sizing: border-box; text-decoration: none; } body{ background: url(https://code.5g-o.com/wp-content/uploads/2020/09/bg-2.jpg) no-repeat center; background-size: cover; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .container{ max-width: 1200px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .image, .accordion-menu{ width: calc(50% - 20px); } .title{ background-color: #e77f67; display: flex; color: #fff; padding: 20px; cursor: pointer; text-transform: uppercase; font-size: 14px; font-weight: 600; align-items: center; justify-content: space-between; } .icon{ position: relative; width: 14px; } .icon::before, .icon::after{ content: ""; position: absolute; width: 14px; height: 3px; background-color: #fff; top: -1.5px; } .icon::after{ transform: rotate(90deg); transition: .5s linear; } .text{ background-color: #ffffff60; color: #fff; line-height: 26px; margin: 6px 0; opacity: 0; height: 0; } .item:target .text{ height: auto; opacity: 1; padding: 20px; margin: 12px 0; } .item:target .icon::after{ transform: rotate(0); } @media screen and (max-width:960px){ .container{ max-width: 600px; } .image, .accordion-menu{ width: 100%; margin: 20px 0; } }

获取源码: Accordion Menu 1
下载数:115人次, 文件大小: 481.1 KB, 上传日期: 2020年-11月-25日
3,098 人查阅
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 6元 才能查看此处内容!立即支付