鐵人賽終於過去一半了～
今天要講的是金魚都能懂的網頁切版 : 時間軸 NO019，
滿適合用在歷史沿革，或是一些活動時間紀錄。

本篇關鍵字

• float
• transform: translateY
• ::before、::after

範例檔

HTML

  <div class="container">
    <h1>Zombie@Dump</h1>
    <p>一段峰迴路轉的人生體驗</p>

    <ol class="timeline">
      <li>
        <a href="https://ithelp.ithome.com.tw/users/20130190/ironman">
          <h2>199X 年</h2>
          <p>Zombie@Dump 誕生
          </p>
        </a>
      </li>
      <li>
        <a href="https://ithelp.ithome.com.tw/users/20130190/ironman">
          <h2>201X 年</h2>
          <p>Zombie@Dump 交到人生中很重要的伴侶</p>
        </a>
      </li>
      <li>
        <a href="https://ithelp.ithome.com.tw/users/20130190/ironman">
          <h2>201X 年</h2>
          <p>Zombie@Dump 大學畢業，然後失業</p>
        </a>
      </li>
      <li>
        <a href="https://ithelp.ithome.com.tw/users/20130190/ironman">
          <h2>201X 年</h2>
          <p>Zombie@Dump 出國留學，還是無業</p>
        </a>
      </li>
      <li>
        <a href="https://ithelp.ithome.com.tw/users/20130190/ironman">
          <h2>201X 年</h2>
          <p>Zombie@Dump 人生第一份正式的正職（超混</p>
        </a>
      </li>
      <li>
        <a href="https://ithelp.ithome.com.tw/users/20130190/ironman">
          <h2>201X 年</h2>
          <p>Zombie@Dump 離開第一份正職，投入轉職</p>
        </a>
      </li>
      <li>
        <a href="https://ithelp.ithome.com.tw/users/20130190/ironman">
          <h2>202X 年</h2>
          <p>Zombie@Dump 找到第一份前端正職，怕.jpg</p>
        </a>
      </li>
    </ol>
  </div>

CSS

body {
  background-color: #FEDFE1;
}

.container {
  width: 960px;
  margin: auto;
  padding: 50px 0;
}

.container h1 {
  color: #111;
  margin-bottom: 10px;
  text-align: center;
}

.container>p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 50px;
  text-align: center;
}

.timeline::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}

.timeline li {
  width: 50%;
  padding: 20px 0;
  box-sizing: border-box;
  position: relative;
}

.timeline li:nth-child(odd) {
  padding-right: 100px;
}

.timeline li:nth-child(even) {
  float: right;
  padding-left: 100px;
  transform: translateY(-50%);
}

.timeline li:nth-child(odd)::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: rgb(254, 132, 140);
  top: 0;
  right: 0;
  z-index: -1;
}

.timeline li a {
  display: block;
  border: 1px solid rgb(254, 132, 140);
  padding: 20px;
  text-decoration: none;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px 5px rgba(254, 132, 140, .4);
  transition: .5s .5s;
}

.timeline a h2 {
  color: #555;
  margin-bottom: .5em;
  transition: .5s .5s;
}

.timeline h2::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-color: #EB7A77;
  transition: .7s .5s linear;
}

.timeline li:nth-child(odd) h2::before {
  right: -10px;
}

.timeline li:nth-child(even) h2::before {
  left: -10px;
}

.timeline h2::after {
  content: '';
  position: absolute;
  height: 1px;
  top: 50%;
  z-index: 0;
  background-color: rgb(254, 132, 140);
  transition: 1s;
}


.timeline li:nth-child(odd) h2::after {
  left: 100%;
  right: 0;
}

.timeline li:nth-child(even) h2::after {
  right: 100%;
  left: 0px;
}

.timeline a p {
  color: #666;
  line-height: 1.5;
  font-weight: 300;
  transition: .5s .5s;
}

.timeline a:hover {
  box-shadow: none;
  background-color: #CB1B45;
}

.timeline a:hover h2,
.timeline a:hover p {
  color: #fff;
}

.timeline li:nth-child(odd) a:hover h2::after {
  left: calc(100% - 100px);
}

.timeline li:nth-child(even) a:hover h2::after {
  right: calc(100% - 100px);
}

喪屍分解

• 我的寫法跟 Amos 的會有點不一樣，他用的是奇數li 設定 float: left 搭配偶數 li 設定 margin-left: auto，我只有在偶數 li 設定 float: right
• 有 float 物件，記得一定要做 clear
• 設定 transform: translateY 做出交錯的畫面
• 大量的使用 ::before、::after 做出時間軸以及圓點
• 搭配 transition 做出一些互動效果
• 這個版面需要注意的是，每個區塊高度要相同，否則會破版

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是稍微輕鬆一點的 Button hover 效果。