如何用多个 DIV 和渐变实现动态时间轴效果？

绚丽的动态时间轴效果巧用多个 div 和渐变

解决难点：

如何实现动态时间轴效果，其中：

• 时间轴长度动态变化
• 时间轴默认呈现为水管状，进度区域渐变染色

实现思路：

• 使用多个 div 拼接组成时间轴
• 奇数 div 显示顶部和右侧边框，偶数 div 显示顶部和左侧边框
• 重点在于边框渐变的衔接和弯曲效果的实现

代码示例：

<div class="content">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

登录后复制

.content > div {
  height: 100px;
  width: 500px;
  border: none;
  border-top: 20px solid;
}

.content > div:nth-child(odd) {
  border-right: 20px solid red;
  border-image: linear-gradient(to right, red, green);
  border-image-slice: 1;
}

.content > div:nth-child(even) {
  border-left: 20px solid red;
  border-image: linear-gradient(to left, red, green);
  border-image-slice: 1;
}

登录后复制

效果展示：

+--------------------------------------------------------------------+
|                                                                    |
|____________________________________________________________________|   +-- --
|                                                                    |  |    |
|                                                                    |  |    |
|                                                                 +-- --   |
|                                                                 |      |
|__________________________________________________________________|      |

登录后复制

延伸思考：

若时间轴只有一个弯，可以使用 conic-gradient 轻松实现。而当有多个弯时，可以通过拼接 conic-gradient 的方式实现。

以上就是如何用多个 DIV 和渐变实现动态时间轴效果？的详细内容，更多请关注GTHOST其它相关文章！