问水平时间线css实现
EN

Stack Overflow用户

提问于 2018-07-04 23:59:07

回答 2查看 3.7K关注 0票数 1

我试图实现一个水平的时间线，但我被卡住了。我需要帮助来准确地实现它！

body {
  background-color: black;
}

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #fff;
}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #F45B69;
}

.timeline ol li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
}

.timeline ol li div::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}

<section class="timeline">
  <ol>
    <li>
      <div>
        <time>2015</time> CHIWEN B.V. established
      </div>
    </li>
    <li>
      <div>
        <time>2016</time> Established long-term research partnership with University of Groningen
      </div>
    </li>
    <li>
      <div>
        <time>2017</time> Research on machine learning, deep learning, distributed training, brain-inspired pattern recognition algorithms, Neo4J and Blockchain, and distributed computing
      </div>
    </li>
    <li>
      <div>
        <time>2018 Jan-Mar</time> Started TuDoLink project Team building Project Feasibility Analysis
      </div>
    </li>
    <li>
      <div>
        <time>2018 Apr-Jul</time> System Framework Design Social Interaction Optimize Partnerships Optimize Business Plan Seed Funding Prepare MVP Prepare Pre-ICO Active on Social Media
      </div>
    </li>
    <li>
      <div>
        <time>2018 Aug-Dec</time> MVP Development Collect Feedbacks of MVP Improve and Update MVP Optimize Team Development Optimize Business Development Release System Beta V1.0 System Testing Prepare ICO Prepare to List
      </div>
    </li>
    <li>
      <div>
        <time>2019 Jan-Jun</time> ICO List Tokens Release APP & Trading Platform V1.0 Works on most of CPUs, GPUs, VPUs Distribute Globally
      </div>
    </li>
  </ol>
</section>

html

css

timeline

Stack Overflow用户

发布于 2018-07-05 07:51:11

您应该尝试使用Visjs.org。这里有一些你可以用它做什么的例子。https://visjs.github.io/vis-timeline/examples/timeline/

对于ex，在文档页面中，这里介绍了如何创建基本的时间线：

<html>
<head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="http://visjs.org/dist/vis.js"></script>
  <link href="ttp://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>

<script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

票数 0

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51177476

复制

相似问题

问水平时间线css实现
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问水平时间线css实现EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问水平时间线css实现
EN