CSS3時間軸效果

antzone發表於2017-04-05
CSSS3

分享一段程式碼例項，它利用css3實現了時間軸效果。

更多時間軸特效可以查閱特效下載時間軸分類。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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.softwhy.com" target="_blank">www.softwhy.com</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>

相關文章