使用CSS Flexbox创建简洁时间轴
在网页设计中,时间轴是一种常见且有效的方式来展示事件的顺序和进程。本文将介绍如何使用CSS Flexbox创建一个简洁优雅的时间轴,无需复杂的JavaScript代码。
基本HTML结构
首先,我们需要创建基本的HTML结构:
html复制<div class="timeline">
<div class="events">
<div class="event life">
<svg class="marker" xmlns="http://www.w3.org/200
0/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>1989</time>
<div class="text">
<p>I was born in the north of Sweden</p>
</div>
</div>
</div>
<!-- 更多事件... -->
</div>
</div>CSS样式
1. 创建时间线
使用::before伪元素创建时间线:
css复制.events {
position: relative;
}
.events::before {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 1px;
background: white;
}2. 事件对齐
使用Flexbox对齐事件:
css复制.event {
display: flex;
align-items: baseline;
}
.event .marker {
position: relative;
left: -6px;
}3. 垂直间距
使用Flexbox控制事件间的垂直间距:
css复制.events {
display: flex;
flex-direction: column;
row-gap: 1em;
}4. 响应式设计
使用媒体查询实现响应式设计:
css复制@media (min-width: 700px) {
.events::before {
left: 50%;
}
.event .marker {
order: 1;
}
.event .content {
width: 50%;
text-align: right;
padding-inline: 1em;
}
.event:nth-child(even) {
flex-direction: row-reverse;
}
.event:nth-child(even) .content {
text-align: left;
}
.event:nth-child(even) .marker {
left: 6px;
}
}完整CSS代码
以下是完整的CSS代码:
css复制.events::before {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 1px;
background: var(--color-hr);
}
.events {
position: relative;
display: flex;
margin-block: 0.5em;
flex-direction: column;
row-gap: 1em;
}
.event {
display: flex;
align-items: baseline;
}
.event .marker {
position: relative;
left: -6px;
}
.event.life .marker {
fill: var(--melange_b_yellow);
}
.event.programming .marker {
fill: var(--melange_b_magenta);
}
.event.family .marker {
fill: var(--melange_b_red);
}
.content time {
font-family: concourse_4, Helvetica, sans-serif;
font-weight: bold;
}
@media (min-width: 700px) {
.events::before {
left: 50%;
}
.event .marker {
order: 1;
}
.event .content {
width: 50%;
text-align: right;
padding-inline: 1em;
}
.event:is(.programming, .work, .projects) {
flex-direction: row-reverse;
}
.event:is(.programming, .work, .projects) .content {
text-align: left;
}
.event:is(.programming, .work, .projects) .marker {
left: 6px;
}
}通过这些CSS样式,我们创建了一个简洁、响应式的时间轴。在小屏幕上,事件垂直排列;在大屏幕上,事件分布在时间线的两侧。这种设计既美观又实用,能够有效地展示事件的顺序和重要性。
使用Flexbox使得创建这样的时间轴变得相对简单,它简化了许多曾经复杂的布局任务。通过调整颜色、字体和间距,你可以进一步自定义时间轴以适应你的网站设计。
demos实现
HTＭＬ实现
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交互式时间轴演示</title>
<style>
/* CSS 样式将在这里 */
</style>
</head>
<body>
<h1>交互式时间轴演示</h1>
<div class="controls">
<label>
时间轴颜色:
<input type="color" id="lineColor" value="#ffffff">
</label>
<label>
事件间距:
<input type="range" id="eventSpacing" min="0.5" max="3" step="0.1" value="1">
</label>
<label>
响应式布局宽度:
<input type="number" id="responsiveWidth" min="300" max="1200" step="50" value="700">px
</label>
</div>
<div class="timeline">
<div class="events">
<div class="event life">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>1989</time>
<div class="text">
<p>我出生在瑞典北部</p>
</div>
</div>
</div>
<div class="event programming">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>2005</time>
<div class="text">
<p>开始学习编程</p>
</div>
</div>
</div>
<div class="event life">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>2010</time>
<div class="text">
<p>搬到瑞典南部</p>
</div>
</div>
</div>
<div class="event programming">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>2015</time>
<div class="text">
<p>开始职业编程生涯</p>
</div>
</div>
</div>
<div class="event family">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>2020</time>
<div class="text">
<p>组建家庭</p>
</div>
</div>
</div>
</div>
</div>
<script>
// JavaScript 代码将在这里
</script>
</body>
</html>CSS实现
css
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
color: #333;
}
h1 {
text-align: center;
}
.controls {
background-color: #e0e0e0;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
.controls label {
display: block;
margin-bottom: 10px;
}
.timeline {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.events::before {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 2px;
background: var(--line-color, #fff);
}
.events {
position: relative;
display: flex;
margin-block: 0.5em;
flex-direction: column;
row-gap: var(--event-spacing, 1em);
}
.event {
display: flex;
align-items: baseline;
}
.event .marker {
position: relative;
left: -6px;
}
.event.life .marker { fill: #ffd700; }
.event.programming .marker { fill: #ff00ff; }
.event.family .marker { fill: #ff0000; }
.content time {
font-weight: bold;
}
@media (min-width: 700px) {
.events::before {
left: 50%;
}
.event .marker {
order: 1;
}
.event .content {
width: 50%;
text-align: right;
padding-inline: 1em;
}
.event:nth-child(even) {
flex-direction: row-reverse;
}
.event:nth-child(even) .content {
text-align: left;
}
.event:nth-child(even) .marker {
left: 6px;
}
}js实现
js
document.addEventListener('DOMContentLoaded', function() {
const lineColor = document.getElementById('lineColor');
const eventSpacing = document.getElementById('eventSpacing');
const responsiveWidth = document.getElementById('responsiveWidth');
const timeline = document.querySelector('.timeline');
const events = document.querySelector('.events');
function updateTimeline() {
timeline.style.setProperty('--line-color', lineColor.value);
events.style.setProperty('--event-spacing', `${eventSpacing.value}em`);
document.body.style.setProperty('--responsive-width', `${responsiveWidth.value}px`);
}
lineColor.addEventListener('input', updateTimeline);
eventSpacing.addEventListener('input', updateTimeline);
responsiveWidth.addEventListener('input', updateTimeline);
updateTimeline();
});完整demo
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交互式时间轴演示</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
color: #333;
}
h1 {
text-align: center;
}
.controls {
background-color: #e0e0e0;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
.controls label {
display: block;
margin-bottom: 10px;
}
.timeline {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.events::before {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 2px;
background: var(--line-color, #fff);
}
.events {
position: relative;
display: flex;
margin-block: 0.5em;
flex-direction: column;
row-gap: var(--event-spacing, 1em);
}
.event {
display: flex;
align-items: baseline;
}
.event .marker {
position: relative;
left: -6px;
}
.event.life .marker { fill: #ffd700; }
.event.programming .marker { fill: #ff00ff; }
.event.family .marker { fill: #ff0000; }
.content time {
font-weight: bold;
}
@media (min-width: var(--responsive-width, 700px)) {
.events::before {
left: 50%;
}
.event .marker {
order: 1;
}
.event .content {
width: 50%;
text-align: right;
padding-inline: 1em;
}
.event:nth-child(even) {
flex-direction: row-reverse;
}
.event:nth-child(even) .content {
text-align: left;
}
.event:nth-child(even) .marker {
left: 6px;
}
}
</style>
</head>
<body>
<h1>交互式时间轴演示</h1>
<div class="controls">
<label>
时间轴颜色:
<input type="color" id="lineColor" value="#ffffff">
</label>
<label>
事件间距:
<input type="range" id="eventSpacing" min="0.5" max="3" step="0.1" value="1">
</label>
<label>
响应式布局宽度:
<input type="number" id="responsiveWidth" min="300" max="1200" step="50" value="700">px
</label>
</div>
<div class="timeline">
<div class="events">
<div class="event life">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>1989</time>
<div class="text">
<p>我出生在瑞典北部</p>
</div>
</div>
</div>
<div class="event programming">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>2005</time>
<div class="text">
<p>开始学习编程</p>
</div>
</div>
</div>
<div class="event life">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>2010</time>
<div class="text">
<p>搬到瑞典南部</p>
</div>
</div>
</div>
<div class="event programming">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>2015</time>
<div class="text">
<p>开始职业编程生涯</p>
</div>
</div>
</div>
<div class="event family">
<svg class="marker" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
<circle cx="6" cy="6" r="6"></circle>
</svg>
<div class="content">
<time>2020</time>
<div class="text">
<p>组建家庭</p>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const lineColor = document.getElementById('lineColor');
const eventSpacing = document.getElementById('eventSpacing');
const responsiveWidth = document.getElementById('responsiveWidth');
const timeline = document.querySelector('.timeline');
const events = document.querySelector('.events');
function updateTimeline() {
timeline.style.setProperty('--line-color', lineColor.value);
events.style.setProperty('--event-spacing', `${eventSpacing.value}em`);
document.body.style.setProperty('--responsive-width', `${responsiveWidth.value}px`);
}
lineColor.addEventListener('input', updateTimeline);
eventSpacing.addEventListener('input', updateTimeline);
responsiveWidth.addEventListener('input', updateTimeline);
updateTimeline();
});
</script>
</body>
</html>