faq问题咨询面板卡片折叠效果代码
代码语言:html
所属分类:选项卡
代码描述:faq问题咨询面板卡片折叠效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: sans-serif; font-size: 10px; } body { width: 100%; min-height: 100vh; font-size: 1.6rem; line-height: 140%; background-color: #f3f6f6; opacity: 0.3; background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #f3f6f6 50px ), repeating-linear-gradient( #56d1b355, #56d1b3 ); opacity: 1; display: grid; place-items: center; } .card { background: #fff; color: #333; margin: 15rem auto; width: 90%; max-width: 50rem; min-height: 30rem; border-radius: 2rem; } .hero { display: flex; justify-content: center; transform: translateY(-55%); } .hero .img { filter: drop-shadow(0rem 1.5rem rgba(0,0,0,0.1)); transition: 0.3s ease-out; } .card:hover .img { filter: drop-shadow(0rem 2.5rem rgba(0,0,0,0.1)); } .title { text-align: center; font-size: 5rem; padding: 1rem; } .acc-container { padding: 4rem 2rem; } .acc-btn { width: 100%; padding: 1.6rem 2rem; font-size: 1.6rem; cursor: pointer; background: inherit; border: none; outline: none; text-align: left; transition: all 0.5s linear; } .acc-btn:after { content: "\27A4"; color: #fa8d0c; float: right; transition: all 0.3s linear; } .acc-btn.is-open:after { transform: rotate(90deg); } .acc-btn:hover, .acc-btn.is-open { color: #000; font-weight: bold; } .acc-content { max-height: 0; color: rgba(0,0,0,0.75); font-size: 1.5rem; margin: 0 2rem; padding-left: 1rem; overflow: hidden; transition: max-height 0.3s ease-in-out; border-bottom: 1px solid #ccc; } </style> </head> <body translate="no" > <main class="card"> <div class="hero"> <img src="//repo.bfw.wiki/bfwrepo/image/5f95ff7e62b03.png" alt="section image" class="img"> </div> <h2 class="title">FAQ</h2> <div class="acc-container"> <button class="acc-btn">What is the definition of a will?</button> <div class="acc-content"> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0