div+css+js实现可折叠垂直时间线代码
代码语言:html
所属分类:布局界面
代码描述:div+css+js实现可折叠垂直时间线代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.3s; --trans-timing: cubic-bezier(0.65,0,0.35,1); font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320)); } a { color: var(--primary); transition: color var(--trans-dur); } body, button { color: var(--fg); font: 1em/1.5 "IBM Plex Sans", sans-serif; } body { background-color: var(--bg); height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } h1 { font-size: 2em; margin: 0 0 3rem; padding-top: 1.5rem; text-align: center; } .btn { background-color: var(--fg); border-radius: 0.25em; color: var(--bg); cursor: pointer; padding: 0.375em 0.75em; transition: background-color calc(var(--trans-dur) / 2) linear, color var(--trans-dur); -webkit-tap-highlight-color: transparent; } .btn:hover { background-color: hsl(var(--hue),10%,50%); } .btn-group { display: flex; gap: 0.375em; margin-bottom: 1.5em; } .timeline { margin: auto; padding: 0 1.5em; width: 100%; max-width: 36em; } .timeline__arrow { background-color: transparent; border-radius: 0.25em; cursor: pointer; flex-shrink: 0; margin-inline-end: 0.25em; outline: transparent; width: 2em; height: 2em; transition: background-color calc(var(--trans-dur) / 2) linear, color var(--trans-dur); -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .timeline__arrow:focus-visible, .timeline__arrow:hover { background-color: hsl(var(--hue),10%,50%,0.4); } .timeline__arrow-icon { display: block; pointer-events: none; transform: rotate(-90deg); transition: transform var(--trans-dur) var(--trans-timing); width: 100%; height: auto; } .timeline__date { font-size: 0.833em; line-height: 2.4; } .timeline__dot { background-color: currentColor; border-radius: 50%; display: inline-block; flex-shrink: 0; margin: 0.625em 0; margin-inline-end: 1em; position: relative; width: 0.75em; height: 0.75em; } .timeline__item { position: relative; padding-bottom: 2.25em; } .timeline__item:not(:last-child):before { background-color: currentColor; content: ""; display: block; position: absolute; top: 1em; left: 2.625em; width: 0.125em; height: 100%; transform: translateX(-50%); } [dir="rtl"] .timeline__arrow-icon { transform: rotate(90deg); } [dir="rtl"] .timeline__item:not(:last-child):before { right: 2.625em; left: auto; transform: translateX(50%); } .timeline__item-header { display: flex; } .timeline__item-body { border-radius: 0.375em; overflow: hidden; margin-top: 0.5em; margin-inline-start: 4em; height: 0; } .timeline__item-body-content { background-color: hsl(var(--hue),10%,50%,0.2); opacity: 0; padding: 0.5em 0.75em; visibility: hidden; transition: opacity var(--trans-dur) var(--trans-timing), visibility var(--trans-dur) steps(1,end); } .timeline__meta { width: 100%; } .timeline__title { font-size: 1.5em; line-height: 1.333; } /* Expanded state */ .timeline__item-body--expanded { height: auto; } .timeline__item-body--expanded .timeline__item-body-content { opacity: 1; visibility: visible; transition-delay: var(--trans-dur), 0s; } .timeline__arrow[aria-expanded="true"] .timeline__arrow-icon { transform: rotate(0); } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,10%); --fg: hsl(var(--hue),10%,90%); --primary: hsl(var(--hue),90%,70%); } } </style> </head> <body translate="no"> <svg display="none"> <symbol id="arrow"> <polyline points="7 10,12 15,17 10" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> </symbol> </svg> <h1>A Brief History of Unix Time</h1> <div id="timeline" class="timeline"> <div class="btn-group"> <button class="btn" type="button" data-action="expand">Expand All</button> <button class="btn" type="button" data-action="collapse">Collapse All</button> </div> <div class="timeline__item"> <div class="timeline__item-header"> <button class="timeline__arrow" type="button" id="item1" aria-labelledby="item1-name" aria-expanded="false" aria-controls="item1-ctrld" aria-haspopup="true" data-item="1"> <svg class="timeline__arrow-icon" viewBox="0 0 24 24" width="24px" height="24px"> <use href="#arrow" /> </svg> </button> <span class="timeline__dot"></span> <span id="item1-name" class="timeline__meta"> <time class="timeline__date" datetime="1970-01-01">January 1, 1970</time><br> <strong class="timeline__title">Unix Epoch</strong> </span> </div> <div class="timeline__item-body" id="item1-ctrld" role="region" aria-labelledby="item1" aria-hidden="true"> <div class="timeline__item-body-content"> <p class="timeline__item-p">This is the day the Unix clock began (or <time datetime="1969-12-31">December 31, 1969</time> if you live behind UTC 😉).</p> </div> </div> </div> <div class="timeline__item"> <div class="timeline__item-header"> <button class="timeline__arrow" type="button" id="item2" aria-labelledby="item2-name" aria-expanded="false" aria-controls="item2-ctrld" aria-haspopup="true" data-item="2"> <svg class="timeline__arrow-icon" viewBox="0 0 24 24" width="24px" height="24px"> <use href="#arrow" /> </svg> </button> <span class="timeline__dot"></span> <span id="item2-name" class="timeline__meta"> <time class="timeline__date" datetime="1973-10-17">October 17, 1973</time><br> <strong class="timeline__title">Digits Within ISO 8601 Format</strong> </span> </div> <div class="timeline__item-body" id="item2-ctrld" role="region" aria-labelledby="item2" aria-hidden="true"> <div class="timeline__item-body-content"> <p class="timeline__item-p">At 6:36:57 PM UTC, the date in ISO 8601 format (1973-10-17) within the time digits (119731017) appeared for the first time.</p> </div> </div> </div> <div class="timeline__item"> <div class="timeline__item-header"> <button class="timeline__arrow" type="button" id="item3" aria-labelledby="item3-name" aria-expanded="false" aria-controls="item3-ctrld" aria-haspopup="true" data-item="3"> <svg class="timeline__arrow-icon" viewBox="0 0 24 24" width="24px" height="24px"> <use href="#arrow" /> </svg> </button> <span class="timeline__dot"></span> <span id="item3-name" class="timeline__meta"> <time class="ti.........完整代码请登录后点击上方下载按钮下载查看
网友评论0