HTML滾動時間軸代碼可以輕松地制作出炫酷的時間軸效果，讓頁面更加生動有趣！以下是一個簡單的代碼示例：
<html>
<head>
<style>
.timeline {
position: relative;
}
.timeline:before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 100%;
background-color: #ddd;
transform: translateX(-50%);
}
.timeline-dot {
position: absolute;
left: 50%;
width: 10px;
height: 10px;
background-color: #ddd;
border-radius: 50%;
transform: translateX(-50%);
z-index: 1;
transition: background-color 0.3s;
}
.timeline-dot:hover {
background-color: #333;
}
.timeline-content {
position: relative;
margin-top: 20px;
margin-left: 30px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
text-align: center;
transition: box-shadow 0.3s;
z-index: 1;
}
.timeline-content:hover {
box-shadow: 0 5px 10px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="timeline">
<div class="timeline-dot"></div>
<div class="timeline-content">
<p>第一條內容</p>
<p>時間：2021年1月1日</p>
</div>
</div>
<div class="timeline">
<div class="timeline-dot"></div>
<div class="timeline-content">
<p>第二條內容</p>
<p>時間：2021年1月2日</p>
</div>
</div>
<div class="timeline">
<div class="timeline-dot"></div>
<div class="timeline-content">
<p>第三條內容</p>
<p>時間：2021年1月3日</p>
</div>
</div>
</body>
</html>以上代碼使用了CSS中的偽元素:before和:hover以及過渡效果transition，結合HTML中的div標簽輕松實現了時間軸的效果，可以根據需要自行修改樣式。
上一篇java 截取json
下一篇it和java是什么關系