最近使用纯CSS和awesome font实现了简单的时间线并添加到about页面中。

想给自己的about页面修饰一下,于是就想添加个个人时间线功能希望能通过时间线功能把自己的故事展现给别人面前,于是就参考网上别人的方法使用CSS + font-awesome实现了简单的时间线功能,效果如下图(也可以直接访问我的about页面


  1. 首先下载boostrapfont-awesome
    在这里我也顺带更新了Freemind中的font-awesome的版本到4.5.0

  2. 主要还是通过div结合CSS的伪类来实现

    HTML部分如下(只包含第一部分),

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <div class="line-warp">
    <div class="timeline-header">
    <span class="badge"><span class="fa fa-clock-o"></span>My Timeline</span>
    </div>
    <div class="line-item">
    <div class="line-icon-warp ">
    <span class="fa-stack fa-lg" >
    <i class="fa fa-circle fa-stack-2x" style="color: #FFC125"></i>
    <i class="fa fa-lightbulb-o fa-stack-1x" style="color: #ffffff"></i>
    </span>
    <span class="badge"> &nbsp;&nbsp;Just Now&nbsp;&nbsp; </span>
    </div>
    <div class="line-content-box">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
    Talk is cheap, show me the code...<br>
       パ..パ・゜<br>
      ( ° Д ° )<br>
    __(_っ / ̄ ̄ ̄ ̄ ̄/_ &nbsp;&nbsp;Inputing...<br>
        \/_____/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在输入...<br>
    </div>
    </div>
    </div>

    CSS部分
    这里的实现主要是通过before和first-child伪类实现在气泡前方添加时间线和图标(图标是使用的font-awesome通过字体大小控制图标大小),贴上代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    /*Time line*/
    /*时间轴大容器*/
    .line-warp{
    position: relative;
    width: 80%;
    min-width: 200px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 30px;
    }
    /*timeline*/
    .line-warp:before{
    position: absolute;
    content: '';
    left:21px;
    width: 2px;
    height: 100%;
    margin-top: 10px;
    margin-bottom: 15px;
    background: #adadad;
    }
    /* 每一行*/
    .line-item{
    position: relative;
    margin-top: 30px;
    }
    /* 左边的图标 容器*/
    .line-icon-warp{
    position: absolute;
    top: 0;
    left: 0;
    }
    /* 通过修改font-size来控制图标大小*/
    .line-icon-warp span:first-child{
    font-size: 22px;
    }
    .line-icon-warp .badge{
    font-size: 13px;
    }
    /*右边 内容*/
    .line-content-box{
    position: relative;
    margin-left: 155px;
    background: #e5e5e5;
    border-radius: .25em;
    padding: 1em;
    color: #000;
    font-family: "Calibri", "Arial", "Microsoft YaHei", "黑体";
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
    }
    /* 用来画内容框左边的小箭头*/
    .line-content-box:before{
    content: '';
    position: absolute;
    top: 14px;
    left: -14px;
    height: 0;
    width: 0;
    border: 7px solid transparent;
    border-right: 7px solid #e5e5e5;
    }
  3. 在这里有一个问题就是如何实现时间线中的绘画气泡样式,我借鉴了别人使用的纯CSS截取div边框的方式实现箭头。 详细方法可以参照这里或者这里

  4. 最终使用boostrap的panel把时间线框起来。


有兴趣的可以直接去我主题的github页面参考css/style.css博客源代码中的about页面about/index.html的代码,其中也包括了简介部分。


Comments