CSS3时间轴效果

快乐打工仔 分类:实例代码

分享一段代码实例,它利用css3实现了时间轴效果。

更多时间轴特效可以查阅特效下载时间轴分类。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  color: #333;
  background: #fff;
  font-size: 12px;
  line-height: 1.785;
}
ul {
  list-style: none;
}
i {
  display: inline-block;
  font-size: 0;
  vertical-align: top;
}
.main {
  width: 480px;
}
.main div {
  font-size: 14px;
}
.main div p {
  font-size: 12px;
  color: #666;
}
.title {
  text-align: center;
  margin: 10px auto;
}
/*列表*/
.list {
  padding-top: 20px;
  padding-left: 30px;
}
.list li {
  position: relative;
  border-left: 1px solid #b1b1b1;
}
.list li:last-child {
  border-left: none;
}
.lefttime {
  display: inline-block;
  width: 80px;
  padding-left: 20px;
  font-size: 14px;
  float: left;
  position: relative;
  top: -10px;
}
.lefttime i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0099ff;
  position: absolute;
  left: -5px;
  top: 7px;
}
.righttext {
  margin-left: 110px;
  position: relative;
  top: -10px;
}
.righttext > div {
  padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
  <!--begin: 标题-->
  <div class="title">
    <div>犀牛前端部落一</div>
    <p>2016年11月28日至2016年12月1日</p>
  </div>
  <!--end: 标题-->
  <!--begin: 事件列表-->
  <div class="list">
    <ul>
      <li>
        <span class="lefttime"><i></i>11月28日</span>
        <div class="righttext">
          <div>
            <div>犀牛前端部落二<span>09:00-10:15</span></div>
            <p>本站的url地址是<a href="http://www.pipipi.net" target="_blank">www.pipipi.net</a></p>
          </div>
        </div>
      </li>
      <li>
        <span class="lefttime"><i></i>11月28日</span>
        <div class="righttext">
          <div>
            <div>犀牛前端部落三<span>09:00-10:15</span></div>
            <p>只有努力奋斗才会有美好的未来</p>
          </div>
          <div>
            <div>犀牛前端部落三<span>09:00-10:15</span></div>
            <p>没有人一开始就是高手,必须通过努力奋斗</p>
          </div>
        </div>
      </li>
      <li>
        <span class="lefttime"><i></i>11月28日</span>
        <div class="righttext">
          <div>
            <div>犀牛前端部落四<span>09:00-10:15</span></div>
            <p>分享和互助式进步的源动力</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <!--end: 事件列表-->
</div>
</body>
</html>

回复

我来回复
  • 暂无回复内容