卡卡網(wǎng)

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

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

本文介紹的CSS timeline時(shí)間線與前面的不同之處是，可為任何節(jié)點(diǎn)設(shè)計(jì)一個(gè)動畫樣式，以凸顯該節(jié)點(diǎn)的標(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)前時(shí)間線: </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> 為一個(gè)節(jié)點(diǎn)盒子。

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

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

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

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

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