js+css实现横向时间线大事记效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现横向时间线大事记效果代码,可左右拖动。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"); :root { --white: #fff; --black: #323135; --crystal: #a8dadd; --columbia-blue: #cee9e4; --midnight-green: #01565b; --yellow: #e5f33d; --timeline-gradient: rgba(206, 233, 228, 1) 0%, rgba(206, 233, 228, 1) 50%, rgba(206, 233, 228, 0) 100%; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } button { background: transparent; border: none; cursor: pointer; outline: none; } a { color: inherit; } img { max-width: 100%; height: auto; } body { font: normal 16px/1.5 "Inter", sans-serif; background: var(--columbia-blue); color: var(--black); margin-bottom: 50px; } /* .section SECTION –––––––––––––––––––––––––––––––––––––––––––––––––– */ .section { padding: 50px 0; } .section .container { width: 90%; max-width: 1200px; margin: 0 auto; text-align: center; } .section h1 { font-size: 2.5rem; line-height: 1.25; } .section h2 { font-size: 1.3rem; } /* TIMELINE –––––––––––––––––––––––––––––––––––––––––––––––––– */ .timeline { position: relative; white-space: nowrap; max-width: 1400px; padding: 0 10px; margin: 0 auto; display: grid; grid-template-columns: 320px auto; grid-gap: 20px; } .timeline::before, .timeline::after { content: ""; position: absolute; top: 0; bottom: 30px; width: 100px; z-index: 2; } .timeline::after { right: 0; background: linear-gradient(270deg, var(--timeline-gradient)); } .timeline::before { left: 340px; background: linear-gradient(90deg, var(--timeline-gradient)); } .timeline .info { display: flex; flex-direction: column; justify-content: center; padding: 20px 40px; color: var(--white); background: var(--midnight-green); white-space: normal; border-radius: 10px; } .timeline .info img { margin-bottom: 20px; } .timeline .info p { margin-top: 10px; color: var(--crystal); } .timeline .info a { text-decoration: none; } .timeline ol::-webkit-scrollbar { height: 12px; } .timeline ol::-webkit-scrollbar-thumb, .timeline ol::-webkit-scrollbar-track { border-radius: 92px; } .timeline ol::-webkit-scrollbar-thumb { background: var(--midnight-green); } .timeline ol::-webkit-scrollbar-track { background: var(--yellow); } .timeline ol { font-size: 0; padding: 250px 0; transition: all 1s; overflow-x: scroll; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .timeline ol li { position: relative; display: inline-block; list-style-type: none; width: 160px; height: 5px; background: var(--white); scroll-snap-align: start; } .timeline ol li:last-child { width: 340px; } .timeline ol li:not(:first-child) { margin-left: 14px; } .timeline ol li:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: calc(100% + 1px); bottom: 0; width: 16px; height: 16px; transform: translateY(-50%); border-radius: 50%; background: var(--midnight-green); z-index: 1; } .timeline ol li div { position: absolute; left: calc(100% + 7px); width: 280px; padding: 15px; font-size: 1rem; white-space: normal; color: var(--black); background: var(--white); border-radius: 0 10px 10px 10px; } .timeline ol li div::before { content: ""; position: absolute; top: 100%; left: 0; width: 0; height: 0; border-style: solid; } .timeline ol li:nth-child(odd) div { top: -16px; transform: translateY(-100%); border-radius: 10px 10px 10px 0; } .timeline ol li:nth-child(odd) div::before { top: 100%; border-width: 8px 8px 0 0; border-color: var(--white) transparent transparent transparent; } .timeline ol li:nth-child(even) div { top: calc(100% + 16px); } .timeline ol li:nth-child(even) div::before { top: -8px; border-width: 8px 0 0 8px; border-color: transparent transparent transparent var(--white); } .timeline time { display: block; font-size: 1.4rem; font-weight: bold; margin-bottom: 8px; color: var(--midnight-green); } /* GENERAL MEDIA QUERIES –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media screen and (max-width: 800px) { .timeline { display: block; } .timeline::before, .timeline::after { width: 50px; } .timeline::before { left: 0; } .timeline .info { display: none; } } /* FOOTER STYLES –––––––––––––––––––––––––––––––––––––––––––––––––– */ .page-footer { position: fixed; right: 0; bottom: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0