HTML5+JQ+CSS3垂直滚动时间轴代码

1、新建html文档。

3、书写css代码。<style>body { background: #32384f; pa颊俄岿髭dding: 0; margin: 0; color: #FFF; height: 500px }h1 { font-size: 56px; font-weight: 400; color: #7045ff; position: relative; }h1:after { content: ""; padding-bottom: 30px; display: block; border-bottom: 1px solid #464c63; width: 60%; }h2 { font-size: 36px; font-weight: 100; color: #83ffe1; position: relative; }img { max-width: 100%; }.timeline { margin: 0; padding: 0; list-style: none; position: fixed; left: 100px; top: 5%; width: 1px; height: 90%; background: #464c63; }.timeline .bar { position: absolute; width: 1px; background-color: #fcf769; top: 0; left: 0; z-index: 0; }.container { padding-left: 200px; }section { border-top: 2px solid #fcf769; padding: 20px; font-size: 16px; font-weight: 200; font-family: "Montserrat"; }p { line-height: 2; }.node { position: absolute; width: 3px; height: 3px; background: #FFF; left: -1px; z-index: 1; cursor: pointer; border-radius: 3px; }.node:hover { background: #46ffdd; }.node:hover span { opacity: 1; }.node:before { content: ""; position: absolute; width: 9px; height: 9px; left: -3px; top: -3px; }.node span { transition: all 0.4s ease-out; text-transform: uppercase; right: 4px; top: -16px; color: #FFFFFF; position: absolute; padding: 10px; white-space: nowrap; font-size: 14px; font-weight: 200; font-family: "Montserrat"; opacity: 0; }</style>

6、代码整体结构。