**摘要：**本文分享一个基于 HTML + CSS 实现的 Timeline 时间轴页面源码，采用纯前端技术构建，包含自定义字体加载、响应式布局、悬停动效等特性，适合用于展示历史事件、项目里程碑或个人经历的时间线场景。
html
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="apple-moible-web-app-capable" content="yes">
<meta name="apple-moible-web-app-status-bar-style" content="black">
<title>Timeline scribble</title>
<style>
/* Variables /
/ Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);
@font-face{
font-family:"minizhuanshu";
src:url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.eot");/IE 9 Compat Modes/
src:local("迷你繁篆书"),
url("webfont/fonts/3pdwg6wqe1jpcgh.eot?#iefix") format("embedded-opentype"),/*IE6-IE8 */
/src: local('minizhuanshu'),
local('minizhuanshu'),/
url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.woff2") format("woff2"),
url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.otf") format("opentype"),
url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.woff") format("woff"),/Modern Browsers/
url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.ttf") format("truetype"),/*Safari,Android,iOS */
url("http://www.dusystem.com/webfont/fonts/3pdwg6wqe1jpcgh.svg#minizhuanshu") format("svg");/Legacy iOS /
font-weight:normal;
font-style:normal;/字体样式/
font-display: swap; / 先匹配到的已经能够使用的字体,字体成功载入后切换字体/
}
body {
font-family: "minizhuanshu";
font-size: 1em;
font-weight: 300;
line-height: 1.5;
letter-spacing: 0.05em;
}
/* Layout */
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Styling */
.timeline {
margin: 4em auto;
position: relative;
max-width: 46em;
}
.timeline:before {
background-color: black;
content: '';
margin-left: -1px;
position: absolute;
top: 0;
left: 2em;
width: 2px;
height: 100%;
}
.timeline-event {
position: relative;
}
.timeline-event:hover .timeline-event-icon {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #a83279;
}
.timeline-event:hover .timeline-event-thumbnail {
-moz-box-shadow: inset 40em 0 0 0 #a83279;
-webkit-box-shadow: inset 40em 0 0 0 #a83279;
box-shadow: inset 40em 0 0 0 #a83279;
}
.timeline-event-copy {
padding: 2em;
position: relative;
top: -1.875em;
left: 4em;
width: 80%;
}
.timeline-event-copy h3 {
font-size: 1.75em;
}
.timeline-event-copy h4 {
font-size: 1.2em;
margin-bottom: 1.2em;
}
.timeline-event-copy strong {
font-weight: 700;
}
.timeline-event-copy p:not(.timeline-event-thumbnail) {
padding-bottom: 1.2em;
}
.timeline-event-icon {
-moz-transition: -moz-transform 0.2s ease-in;
-o-transition: -o-transform 0.2s ease-in;
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: black;
outline: 10px solid white;
display: block;
margin: 0.5em 0.5em 0.5em -0.5em;
position: absolute;
top: 0;
left: 2em;
width: 1em;
height: 1em;
}
.timeline-event-thumbnail {
-moz-transition: box-shadow 0.5s ease-in 0.1s;
-o-transition: box-shadow 0.5s ease-in 0.1s;
-webkit-transition: box-shadow 0.5s ease-in;
-webkit-transition-delay: 0.1s;
transition: box-shadow 0.5s ease-in 0.1s;
color: white;
font-size: 0.75em;
background-color: black;
-moz-box-shadow: inset 0 0 0 0em #ef795a;
-webkit-box-shadow: inset 0 0 0 0em #ef795a;
box-shadow: inset 0 0 0 0em #ef795a;
display: inline-block;
margin-bottom: 1.2em;
padding: 0.25em 1em 0.2em 1em;
}
</style>
</head>
<body>
<ul class="timeline">
<li class="timeline-event">
<label class="timeline-event-icon"></label>
<div class="timeline-event-copy">
<p class="timeline-event-thumbnail">April 2011 - 涂聚文</p>
<h3>Geovin Du,你好! 涂聚文</h3>
<h4>Geovin Du,你好! 涂聚文</h4>
<p><strong>天下为公，天下为公</strong><br>明朝（1368-1644年）由朱元璋建立，推翻元朝统治。初期郑和下西洋彰显国力，中期修筑长城防御蒙古，晚期遭遇小冰河期与内忧外患。最终李自成攻破北京，崇祯帝自缢，存续276年，是中国历史上最后一个由汉族建立的大一统王朝。</p>
<p><strong>国庆节快乐！</strong><br>金朝（1115-1234年）由女真族建立，完颜阿骨打统一东北后灭辽、北宋，定都中都。全盛时期疆域涵盖中国北方及西伯利亚东部，推行汉法改革并创制女真文字。后期受蒙古压迫南迁开封，最终被蒙宋联军所灭，存续119年，深刻影响了中国北方的政治格局与文化融合进程。</p>
</div>
</li>
<li class="timeline-event">
<label class="timeline-event-icon"></label>
<div class="timeline-event-copy">
<p class="timeline-event-thumbnail">November 2009 - März 2011</p>
<h3>Geovin Du,你好! 涂聚文</h3>
<h4>Geovin Du,你好! 涂聚文</h4>
<p>元朝（1271-1368年）由蒙古孛儿只斤氏建立，忽必烈定都大都。疆域空前辽阔，行省制奠定后世版图基础，促进民族融合与中外交流。因实行四等人制及财政危机引发红巾军起义，最终被明朝取代，存续97年。</p>
</div>
</li>
<li class="timeline-event">
<label class="timeline-event-icon"></label>
<div class="timeline-event-copy">
<p class="timeline-event-thumbnail">April 2011 - 涂聚文</p>
<h3>Geovin Du,你好! 涂聚文</h3>
<h4>IT-Consultant</h4>
<p><strong>Geovin Du,你好! 涂聚文</strong><br>清朝（1636-1912年）由满族建立，入关后统一全国并奠定现代版图。前期康乾盛世国力鼎盛，晚期因闭关锁国遭列强入侵，陷入半殖民地危机。经辛亥革命推翻帝制，存续近三百年，是中国最后一个封建王朝。</p>
</div>
</li>
</ul>
</body>
</html>