水平时间轴CSS实现

问题描述 投票：0回答：3

我正在尝试实现水平时间线，但我陷入困境。我需要帮助来准确地实施它！ 

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
3个回答
2
投票

使用 2 行 CSS 网格，时间线的每个部分可以定义为 2 列宽。将第二段设置为 3 列宽，即可立即获得交错布局。我将我的构建为描述列表，但这是基本思想：

dl {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
}
.cell {
  grid-column: span 2;
}
.cell:nth-child(2) {
  grid-column: span 3;
}

https://codepen.io/joemaffei/pen/WNQKyPo

0
投票

您应该尝试使用 Visjs.org。以下是您可以用它做什么的一些示例。 https://visjs.github.io/vis-timeline/examples/timeline/

例如，文档页面介绍了如何创建基本时间线：

<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
投票

我可能迟到了，但这是我的实现，它实际上与屏幕截图中的相同。 它仅使用 HTML 和 CSS 制作。 唯一需要设置的参数是：

  • css 变量
    --items
    ，表示时间轴中元素的数量
  • css变量
    --index
    ，表示时间线每个元素的索引（从1开始） 这些变量也可以使用 JS 自动化

body {
  font-family: "Montserrat", "Arial", sans-serif;
  margin: 0;
}

.timeline {
  --background: #0a0f2b;
  --accent: #02d664;
  --text: white;
  --line: #c4c4c4;
  background: var(--background);
  color: var(--text);
  padding: 30px;
}

.timeline h1 {
  border-left: 4px solid var(--accent);
  padding: 10px 12px 10px;
}

.timeline ul {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--items), 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.timeline ul:before {
  content: '';
  position: absolute;
  top: 50%;
  width: 100%;
  border-top: 3px solid var(--text);
  left: 11px;
}

.timeline ul:after {
  content: "\f04b";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 1px;
  right: -15px;
  font-size: 25px;
  color: var(--accent);
}

.timeline ul li {
  --circle-size: 15px;
  grid-column: var(--index);
  overflow: hidden;
  position: relative;
  height: calc(100% + var(--circle-size) * 0.5);
}

.timeline ul li:after {
  content: '';
  width: var(--circle-size);
  height: var(--circle-size);
  background: var(--line);
  position: absolute;
  bottom: 0;
  left: var(--circle-size);
  border-radius: 100px;
  transform: translateX(-50%);
  z-index: 1;
}

.timeline ul li:nth-child(even):after {
  bottom: auto;
  top: 0;
}

.timeline ul li:nth-child(even) {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 40px;
  margin-top: calc(var(--circle-size) * -0.45);
}

.timeline ul li:nth-child(odd) p:after,
.timeline ul li:nth-child(even) h3:before {
  content: "";
  display: block;
  border-left: 2px dashed var(--text);
  height: 100vh;
  margin-top: 10px;
  position: absolute;
  left: calc(var(--circle-size) - 1px);
}

.timeline ul li:nth-child(even) h3:before {
  bottom: 100%;
  margin-bottom: 5px;
}

.timeline ul li>* {
  padding-left: calc(var(--circle-size) * 0.4);
}

.timeline ul li h3 {
  color: var(--accent);
  margin: 0;
  margin-bottom: 5px;
  font-size: 1.6em;
  position: relative;
}

.timeline ul li p {
  margin: 0;
  position: relative;
  text-wrap: pretty;
}

@media (max-width: 568px) {
  .timeline ul {
    display: flex;
    flex-direction: column;
  }
  .timeline ul li {
    grid-column: 1 !important;
    grid-row: var(--index) !important;
    height: 100%;
    padding-bottom: 30px;
    padding-top: 10px;
  }
  .timeline ul:before,
  .timeline ul:after,
  .timeline ul li:after,
  .timeline ul li:nth-child(even) h3:before,
  .timeline ul li:last-child p:after {
    display: none;
  }
  .timeline ul li:first-child {
    padding-top: 0;
  }
  .timeline ul li:nth-child(even) {
    margin-top: 0;
    padding-top: 10px;
  }
  .timeline ul li p:after {
    content: "";
    display: block;
    border-left: 2px dashed var(--text);
    height: 100vh;
    margin-top: 10px;
    position: absolute;
    left: calc(var(--circle-size) - 1px);
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet" />
<div class="timeline" style="--items: 7;">
  <h1>Timeline</h1>
  <ul>
    <li style="--index: 1">
      <h3>2015</h3>
      <p>CHIWEN B.V. established</p>
    </li>
    <li style="--index: 2">
      <h3>2016</h3>
      <p>Established long-term research partnership with University of Groningen</p>
    </li>
    <li style="--index: 3">
      <h3>2017</h3>
      <p>Research on machine learning, deep learning, distributed training, brain-inspired pattern recognition algorithms, Neo4J and Blockchain, and distributed computing</p>
    </li>
    <li style="--index: 4">
      <h3>2018 Jan-Mar</h3>
      <p>Started TuDoLink project Team building Project Feasibility Analysis</p>
    </li>
    <li style="--index: 5">
      <h3>2018 Apr-Jul</h3>
      <p>
        System Framework Design Social Interaction Optimize Partnerships Optimize Business Plan Seed Funding Prepare MVP Prepare Pre-ICO Active on Social Media
      </p>
    </li>
    <li style="--index: 6">
      <h3>2018 Aug-Dec</h3>
      <p>
        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
      </p>
    </li>
    <li style="--index: 7">
      <h3>2019 Jan-Jun</h3>
      <p>
        ICO List Tokens Release APP & Trading Platform V1.0 Works on most of CPUs, GPUs, VPUS Distribute Globally
      </p>
    </li>
  </ul>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.