css实现折叠手风琴式faq问答效果代码
代码语言:html
所属分类:其他
代码描述:css实现折叠手风琴式faq问答效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color:#c15236; font-family:'Arial'; padding:2em 6em } h1 { color:#fff; text-align:center } .acc-kontainer { width:100%; margin:auto } .acc-kontainer .acc-body { width:98%; width:calc(100% - 20px); margin:0 auto; height:0; color:rgba(0,0,0,0); background-color:rgba(255,255,255,0.2); line-height:28px; padding:0 20px; box-sizing:border-box; transition:.5s } .acc-kontainer label { cursor:pointer; background-color:rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.1); display:block; padding:15px; width:100%; color:#fff; font-weight:400; box-sizing:border-box; z-index:100 } .acc-kontainer input { display:none } .acc-kontainer label:before { font-family:'FontAwesome'; content:'\f067'; font-weight:bolder; float:right } .acc-kontainer input:checked+label { background-color:rgba(255,255,255,0.15) } .acc-kontainer input:checked+label:before { font-family:'FontAwesome'; content:'\f00d'; transition:.5s } .acc-kontainer input:checked~.acc-body { height:auto; color:#fff; font-size:16px; padding:20px; transition:.5s } </style> <link type="text/css" rel="stylesheet" href="//repo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0