时间戳

首页 > 解决方案 > 水平时间线 css 实现

html - 水平时间线 css 实现

问题描述

我正在尝试实现水平时间线，但我被卡住了。我需要帮助来实现它！

我试图实现的水平时间线是这张附加的图片

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>

标签： htmlcsstimeline

解决方案

Using a CSS grid with 2 rows, each segment of the timeline can be defined to be 2 columns wide. Making the 2nd segment 3 columns wide instantly gives you a staggered layout. I built mine as a description list, but this is the basic idea:

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

推荐阅读