css实现手风琴式折叠faq选项卡效果代码
代码语言:html
所属分类:选项卡
代码描述:css实现手风琴式折叠faq选项卡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/boxicons.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); :root { --body-bg: #f9f9f9; --border: #ddd; --shadow: 0px 4px 16px rgba(0, 0, 0, 0.09); --icon-bg: #DEDEDE; } body { font-family: 'Poppins', sans-serif; background: var(--body-bg); color: #444; display: grid; place-items: center; min-height: 100vh; } .accordion__content { max-width: 570px; margin: 0 auto; padding: 2rem; background: #fff; box-shadow: var(--shadow); border-radius: 8px; } .accordion__item { display: flex; flex-direction: column; padding: 0 1rem; border-radius: 6px; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--body-bg); margin-bottom: .5em; } .item__header { display: flex; justify-content: space-between; -moz-column-gap: .2em; column-gap: .2em; } .item__icon { margin-top: 1rem; flex: 0 0 25px; display: grid; place-items: center; font-size: 1.25rem; height: 25px; width: 25px; border-radius: 4px; background: var(--icon-bg); cursor: pointer; box-shadow: var(--shadow); } .item__icon i { transition: all 0.25s cubic-bezier(0.5, 0, 0.1, 1); } .item__question { font-size: 1em; line-height: 1; font-weight: 500; } .active .item__icon i { transform: rotate(180deg); } .active .item__question { font-weight: 500; } .item__content { max-height: 0; overflow: hidden; transition: all 300ms ease; } .item__answer { line-height: 150%; opacity: .8; } </style> </head> <body > <!--1---> <div class="accordion__content"> <h2>Accordion FAQ</h2> <div class="accordion__item"> <header class="item__header"> <h4 class="item__question"> Cascading styles CSS </h4> <div class="item__icon"> <i class='bx bx-chevron-down'></i> </div> </header> <div class="item__content"> <p class="item__answer"> Cascading Style Sheets é um mecanismo para adicionar estilo a um documento web. </p> <p class="item__answer"> O código CSS pode ser aplicado diretamente nas tags ou ficar contido dentro das tags <style >. Também é possível, em vez de colocar a formatação dentro do documento, criar um link para um arquivo CSS que contém os estilos. </p> </div> </div> <div class="accordion__item"> <header class="item__header"> <h4 class="item__question"> What is your name? </h4> <div class="item__i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0