|
|
|
|
|
|
包含動畫樣式的css時間線(timeline)
作者:admin 時間:2022-1-19 21:53:41 瀏覽:前面介紹過幾款css timeline時間線樣式，可參考：
本文介紹的CSS timeline時間線與前面的不同之處是，可為任何節點設計一個動畫樣式，以凸顯該節點的標題和內容。如圖：
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">當前時間線: </span>標題文字</a></h2>
<p>內容</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="#">標題二</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="#">標題三</a></h3>
</li>
</ol>
</div>
<li class="v-timeline--item"></li> 為一個節點盒子。
h2 標簽的標題為動畫節點，h3 標簽的標題為普通標題。
<svg></svg> 標簽是節點圓點，可修改代碼更改其大小及位置，此外還需結合使用一個css屬性v-timeline--bullet。
您可能對以下文章也感興趣
x
