CSS3垂直时间轴

一款CSS3垂直时间轴代码，最新的时间可以放在最上面，时间事件的说明文字可以时多个段落，激活展开的事件内容样式为突出显示，整体效果还是比较简洁大气的，喜欢的童鞋请收下吧。

页面的head部分，仅需引入一个页面样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，使用了多个li标签来展示不同的时间事件，激活的时间点为checked状态，代码如下：

<h2>CSS3垂直时间轴</h2> 
<p>可自由增加时间点和说明内容</p> 
<ul id='timeline'> 
  <li class='work'> 
    <input class='radio' id='work5' name='works' type='radio' checked> 
    <div class="relative"> 
      <label for='work5'>接受</label> 
      <span class='date'>2016年10月8日</span> 
      <span class='circle'></span> 
    </div> 
    <div class='content'> 
      <p>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p> 
      <p>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</p> 
    </div> 
  </li> 
  <li class='work'> 
    <input class='radio' id='work4' name='works' type='radio'> 
    <div class="relative"> 
      <label for='work4'>信念</label> 
      <span class='date'>2016年9月8日</span> 
      <span class='circle'></span> 
    </div> 
    <div class='content'> 
      <p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</p> 
      <p>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”</p> 
    </div> 
  </li> 
  <li class='work'> 
    <input class='radio' id='work3' name='works' type='radio'> 
    <div class="relative"> 
      <label for='work3'>要求</label> 
      <span class='date'>2016年8月8日</span> 
      <span class='circle'></span> 
    </div> 
    <div class='content'> 
      <p>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</p> 
      <p>这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。</p> 
    </div> 
  </li> 
</ul>