all布局实现常见问题列表页面效果代码
代码语言:html
所属分类:布局界面
代码描述:all布局实现常见问题列表页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.11.2.css"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Muli&display=swap"); * { box-sizing: border-box; } body { font-family: "Muli", sans-serif; background-color: #f0f0f0; } h1 { margin: 50px 0 30px; text-align: center; } .faq-container { max-width: 600px; margin: 0 auto; } .faq { background-color: transparent; border-radius: 10px; margin: 20px 0; padding: 30px; position: relative; overflow: hidden; transition: 0.3s ease; } .faq.active { background-color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); } .faq.active::before, .faq.active::after { content: ""; font-family: "Font Awesome 5 Free"; color: #2ecc71; font-size: 7rem; position: absolute; opacity: 0.2; top: 20px; left: 20px; z-index: 0; } .faq.active::before { color: #3498db; top: -10px; left: -30px; transform: rotateY(180deg); } .faq-title { margin: 0 35px 0 0; } .faq-text { display: none; margin: 30px 0 0; } .faq.active .faq-text { display: block; } .faq-toggle { background-color: transparent; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; outline: none; padding: 0; position: absolute; top: 30px; right: 30px; height: 30px; width: 30px; } .faq-toggle .fa-times { display: none; } .faq.active .faq-toggle .fa-times { display: block; color: #fff; } .faq.active .faq-toggle .fa-chevron-down { display: none; } .faq.active .faq-toggle { background: #9fa4a8; } </style> </head> <body > <h1>Frequently Asked Questions</h1> <div class="faq-container"> <div class="faq active"> <h3 class="faq-title"> Why shouldn't we trust atoms? </h3> <p class="faq-text"> They make up everything .........完整代码请登录后点击上方下载按钮下载查看
网友评论0