卡卡網(wǎng)

前面介紹過幾款css timeline時間線樣式，可參考：

• 分享2個純CSS實現(xiàn)的響應(yīng)式垂直時間線
• 純css實現(xiàn)的自適應(yīng)的垂直時間線
• 純CSS3實現(xiàn)的時間線 (Timeline)

本文介紹的CSS timeline時間線與前面的不同之處是，可為任何節(jié)點設(shè)計一個動畫樣式，以凸顯該節(jié)點的標(biāo)題和內(nèi)容。如圖：

demodownload

HTML

<div class="v-timeline" aria-live="polite">
  <ol class="v-timeline--items">
    <li class="v-timeline--item">
      <span aria-hidden="true" class="v-timeline--bullet -pulsar">
        <svg viewBox="0 0 16 16" focusable="false"><circle stroke="none" cx="8" cy="8" r="8"></circle></svg>
      </span>
      <h2><a href="#"><span class="v-timeline--accent">當(dāng)前時間線: </span>標(biāo)題文字</a></h2>
      <p>內(nèi)容</p>
    </li>
    <li class="v-timeline--item">
      <span aria-hidden="true" class="v-timeline--bullet">
        <svg viewBox="0 0 16 16" focusable="false"><circle stroke="none" cx="8" cy="8" r="8"></circle></svg>
      </span>
      <h3><a href="#">標(biāo)題二</a></h3>
    </li>
    <li class="v-timeline--item">
      <span aria-hidden="true" class="v-timeline--bullet">
        <svg viewBox="0 0 16 16" focusable="false"><circle stroke="none" cx="8" cy="8" r="8"></circle></svg>
      </span>
      <h3><a href="#">標(biāo)題三</a></h3>
    </li>
  </ol>
</div>

<li class="v-timeline--item"></li> 為一個節(jié)點盒子。

h2 標(biāo)簽的標(biāo)題為動畫節(jié)點，h3 標(biāo)簽的標(biāo)題為普通標(biāo)題。

<svg></svg> 標(biāo)簽是節(jié)點圓點，可修改代碼更改其大小及位置，此外還需結(jié)合使用一個css屬性v-timeline--bullet。

您可能對以下文章也感興趣

• 分享2個純CSS實現(xiàn)的響應(yīng)式垂直時間線
• 純css實現(xiàn)的自適應(yīng)的垂直時間線
• 純CSS3實現(xiàn)的時間線 (Timeline)，非常實用

標(biāo)簽: Timeline  時間線