纯css实现手风琴折叠效果代码
代码语言:html
所属分类:其他
代码描述:纯css实现手风琴折叠效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700'> <style> @charset "UTF-8"; body { color: #2c3e50; background: #ecf0f1; padding: 0 1em 1em; } h1 { margin: 0; line-height: 2; text-align: center; } h2 { margin: 0 0 0.5em; font-weight: normal; } input { position: absolute; opacity: 0; z-index: -1; } .row { display: flex; } .row .col { flex: 1; } .row .col:last-child { margin-left: 1em; } /* Accordion styles */ .tabs { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5); } .tab { width: 100%; color: white; overflow: hidden; } .tab-label { display: flex; justify-content: space-between; padding: 1em; background: #2c3e50; font-weight: bold; cursor: pointer; /* Icon */ } .tab-label:hover { background: #1a252f; } .tab-label::after { content: "❯"; width: 1em; height: 1em; text-align: center; transition: all 0.35s; } .tab-content { max-height: 0; padding: 0 1em; color: #2c3e50; background: white; transition: all 0.35s; } .tab-close { display: flex; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: #2c3e50; cursor: pointer; } .tab-close:hover { background: #1a252f; } input:checked + .tab-label { background: #1a252f; } input:checked + .tab-label::after { transform: rotate(90deg); } input:checked ~ .tab-content { max-height: 100vh; padding: 1em; } </style> </head> <body> <!-- partial:index.partial.html --> <h1>Pure CSS Accordion <sup>2.0</sup></h1> <div class="row"> <div class="col"> <h2>Open <b>multiple</b></h2> <div class="tabs"> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0