当前位置：首页 > CSS

css制作路线

2026-02-27 06:38:13CSS

使用CSS制作路线的方法

通过CSS可以创建各种路线效果，如导航路径、时间线或连接线。以下是几种常见实现方式：

线性渐变实现虚线路线

.route-line {
  height: 2px;
  background: linear-gradient(to right, black 50%, transparent 50%);
  background-size: 10px 2px;
  width: 100%;
}

这种方法适合创建水平或垂直的虚线路径，通过调整background-size控制虚线间距。

伪元素实现连接线

.connection {
  position: relative;
  padding-left: 20px;
}
.connection::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #3498db;
}

适用于垂直时间线或树状结构，通过伪元素创建连接线。

css制作路线

SVG内联实现曲线路径

<div class="svg-route">
  <svg viewBox="0 0 100 100">
    <path d="M10 10 C 20 50, 40 50, 50 10" stroke="black" fill="none"/>
  </svg>
</div>

SVG提供更复杂的路径控制，适合需要曲线效果的场景。

Flex布局实现水平路线

css制作路线

.route-container {
  display: flex;
  align-items: center;
}
.route-node {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e74c3c;
}
.route-node + .route-node {
  margin-left: 30px;
  position: relative;
}
.route-node + .route-node::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  left: -30px;
  top: 50%;
  background: #95a5a6;
}

这种方法结合flex布局和伪元素，创建带节点的水平路线。

动画路线效果

@keyframes draw {
  to { stroke-dashoffset: 0; }
}
.animated-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3s forwards;
}

配合SVG的stroke-dasharray属性，可以实现路径绘制动画效果。

选择合适的方法取决于具体需求：简单直线可用CSS渐变或边框，复杂路径推荐使用SVG，需要交互效果时可结合JavaScript控制CSS变量。