纯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> body { color: #2c3e50; background: #ecf0f1; padding: 0 1em 1em; } h1 { margin: 0; line-height: 2; text-align: center; } h2 { margin: 0 0 .5em; font-weight: normal; } input { position: absolute; opacity: 0; z-index: -1; } .row { display: -webkit-box; display: flex; } .row .col { -webkit-box-flex: 1; 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: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding: 1em; background: #2c3e50; font-weight: bold; cursor: pointer; /* Icon */ } .tab-label:hover { background: #1a252f; } .tab-label::after { content: "\276F"; width: 1em; height: 1em; text-align: center; -webkit-transition: all .35s; transition: all .35s; } .tab-content { max-height: 0; padding: 0 1em; color: #2c3e50; background: white; -webkit-transition: all .35s; transition: all .35s; } .tab-close { display: -webkit-box; display: flex; -webkit-box-pack: end; 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 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } input:checked ~ .tab-content { max-height: 100vh; padding: 1em; } </style> </head> <body tra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0