時光軸一直是網頁設計中常見的效果之一，讓頁面更加具有交互性和視覺效果。CSS技術在實現時光軸方面也有很大的作用。

.timeline {
position: relative;
max-width: 1200px;
margin: 50px auto;
padding: 0 30px;
}

首先，我們需要創建一個容器來放置時光軸。為該容器添加相應的樣式，如相對定位和最大寬度。

.timeline:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: #ccc;
}

然后，我們在容器前面添加一個偽元素來表示時間軸。使用絕對定位和transform屬性將其居中，并用顏色填充。同時，我們還需要把它的高度設置為與容器相等。

.timeline-item {
position: relative;
padding: 50px 0;
}
.timeline-item:not(:last-child):before {
content: '';
position: absolute;
top: 50%;
left: -22px;
transform: translateY(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #337ab7;
}
.timeline-item.default {
height: 0;
margin-top: -25px;
}
.timeline-item.default:before {
width: 0;
height: 0;
border: 12px solid transparent;
border-right: 12px solid #337ab7;
left: -12px;
}

接著，我們為每個時刻創建一個項目。在項目上使用相對定位，為它添加一些內邊距來使項目看起來更加美觀。如果它不是最后一個項目，我們需要添加一個小圓點來指示時間軸。我們還可以為最后一個項目創建一個特殊的類default，以便讓它的樣式與其他項目不同。

.timeline-item-content {
padding-left: 40px;
}
.timeline-item-content h3 {
margin-top: 0;
font-size: 1.2rem;
font-weight: normal;
}
.timeline-item-content p {
margin: 0;
font-size: 1rem;
line-height: 1.5;
}
.timeline-item-content .btn {
display: inline-block;
margin-top: 10px;
background-color: #337ab7;
color: #fff;
padding: 8px 15px;
border-radius: 5px;
}

最后，我們在每個項目中放置內容。為內容區域設置左側內邊距，使其與圓點對齊。為標題和描述添加相應的樣式，以便它們更易于閱讀。我們還可以為按鈕添加一些樣式，以增加其可操作性。

通過以上CSS代碼，我們可以快速地實現一個簡單的時光軸效果。根據實際需要，我們可以進一步擴展樣式以滿足需求。