[css/scss] 水平時間軸(Horizontal Timeline)範例及原始碼分享

水平時間軸

為了方便客製化，這次使用scss來寫，並把幾個重要的參數拉出來寫，其中比較重要的是$event-num，如果有4個項目的話，會用全部的長度均分，因此請依照自己實際使用去修改這個參數。

style.scss

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');

$line-color: #FA8072;  // 水平線的顏色
$point-color: #FF4500; // 圓點的顏色
$point-size: 16px;     // 圓點的大小(直徑) 
$half-point-size: $point-size/2;
$active-font-color: #FA8072;
$inactive-font-color: rgba(0, 0, 0, 0.5);
$event-num: 4;  // 圓點(項目)數量

#timeline {
  ol {
    position: relative;
    display: block;
    margin-top: 50px;
    margin-bottom: 100px;
    height: 1px;
    padding-inline-start: 0;
  }

  li {
    position: relative;
    display: inline-block;
    float: left;
    width: calc(100% /  #{$event-num});
    height: 1px;
    background: $line-color;
    color: $inactive-font-color;
    .diplome {
      text-align: center;
      margin-top: 20px;
    }
    .point {
      content: "";
      display: block;
      width: $point-size;
      height: $point-size;
      border-radius: 50%;
      border: 1px solid $point-color;
      background: #fff;
      position: absolute;
      top: -#{$half-point-size};
      left: calc(50% - #{$half-point-size});
    }
    .timestamp {
      font-size: 14px;
      text-align: center;
    }
    &.active>.point {
      border: $half-point-size solid $point-color;
    }
    &.active>.diplome,
    &.active>.timestamp {
      color: $active-font-color;
    }
  }
}

如果習慣看css的人，可以利用一些線上的轉換網站(如：sassmeister)轉換成css。

index.html

<div class="container">
  <div id="timeline">
    <ol>
      <li class="active">
        <span class="point"></span>
        <h6 class="diplome">My Birthday</h6>
        <p class="timestamp">2018/06/01</p>
      </li>
      <li class="active">
        <span class="point"></span>
        <h6 class="diplome">Father's Day</h6>
        <p class="timestamp">2018/08/08</p>
      </li>
      <li>
        <span class="point"></span>
        <h6 class="diplome">Helloween</h6>
        <p class="timestamp"></p>
      </li>
      <li>
        <span class="point"></span>
        <h6 class="diplome">Christmas</h6>
        <p class="timestamp"></p>
      </li>
    </ol>
  </div>
</div>

原始碼放在codepen上[連結]，歡迎參考：

See the Pen Horizontal Timeline by chenuin (@chenuin) on CodePen.