纯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=Titillium+Web:300,700,300italic'> <style> .transition, p, ul li i:before, ul li i:after { transition: all 0.25s ease-in-out; } .flipIn, h1, ul li { animation: flipdown 0.5s ease both; } .no-select, h2 { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html { width: 100%; height: 100%; perspective: 900; overflow-y: scroll; background-color: #dce7eb; font-family: "Titillium Web", sans-serif; color: rgba(48, 69, 92, 0.8); } body { min-height: 0; display: inline-block; position: relative; left: 50%; margin: 90px 0; transform: translate(-50%, 0); box-shadow: 0 10px 0 0 #ff6873 inset; background-color: #fefffa; max-width: 450px; padding: 30px; } @media (max-width: 550px) { body { box-sizing: border-box; transform: translate(0, 0); max-width: 100%; min-height: 100%; margin: 0; left: 0; } } h1, h2 { color: #ff6873; } h1 { text-transform: uppercase; font-size: 36px; line-height: 42px; letter-spacing: 3px; font-weight: 100; } h2 { font-size: 26px; line-height: 34px; font-weight: 300; letter-spacing: 1px; display: block; background-color: #fefffa; margin: 0; cursor: pointer; } p { color: rgba(48, 69, 92, 0.8); font-size: 17px; line-height: 26px; letter-spacing: 1px; position: relative; overflow: hidden; max-height: 800px; opacity: 1; transform: translate(0, 0); margin-top: 14px; z-index: 2; } ul { list-style: none; perspective: 900; padding: 0; margin: 0; } ul li { position: relative; padding: 0; margin: 0; padding-bottom: 4px; padding-top: 18px; border-top: 1px dotted #dce7eb; } ul li:nth-of-type(1) { animation-delay: 0.5s; } ul li:nth-of-type(2) { animation-delay: 0.75s; } ul li:nth-of-type(3) { animation-delay: 1s; } ul li:last-of-type { padding-bottom: 0; } ul li i { position: absolute; transform: translate(-6px, 0); margin-top: 16px; right: 0; } ul li i:before, ul li i:after { content: ""; position: absolute; background-color: #ff6873; width: 3px; height: 9px; } ul li i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0