当前位置：首页 > CSS

css线条特效制作

2026-03-12 08:50:36CSS

CSS线条特效制作方法

基础线条动画 使用border或background属性配合animation实现简单线条动态效果：

.line-effect {
  height: 2px;
  background: linear-gradient(90deg, transparent, #3498db, transparent);
  animation: shine 2s infinite;
}
@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

悬停下划线扩展 创建鼠标悬停时扩展的下划线效果：

.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: #e74c3c;
  transition: width 0.3s ease, left 0.3s ease;
}
.hover-underline:hover::after {
  width: 100%;
  left: 0;
}

SVG线条动画 结合SVG实现更复杂的路径动画：

<svg class="svg-line" viewBox="0 0 100 2">
  <path d="M0 1 H100" stroke="#9b59b6" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="100"/>
</svg>

.svg-line {
  width: 100%;
  height: 2px;
}
@keyframes dash {
  to { stroke-dashoffset: 0; }
}
.svg-line path {
  animation: dash 1.5s forwards;
}

多段线条组合 通过伪元素创建分段的装饰线条：

.decorative-line {
  position: relative;
  padding: 20px 0;
}
.decorative-line::before,
.decorative-line::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 40%;
  background: linear-gradient(to right, transparent, #2ecc71);
}
.decorative-line::before {
  top: 0;
  left: 0;
}
.decorative-line::after {
  bottom: 0;
  right: 0;
}

3D立体线条效果 使用box-shadow和transform模拟3D效果：

.line-3d {
  height: 4px;
  background: #f39c12;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transform: perspective(100px) rotateX(10deg);
}

虚线动画 创建动态滚动的虚线效果：

.dashed-line {
  height: 2px;
  background: repeating-linear-gradient(90deg, #3498db, #3498db 10px, transparent 10px, transparent 20px);
  animation: scroll 1s linear infinite;
}
@keyframes scroll {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

线条加载指示器 制作进度指示动画：

css线条特效制作

.loader-line {
  height: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.loader-line::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 50%;
  background: #3498db;
  animation: loading 2s ease-in-out infinite;
}
@keyframes loading {
  0% { left: -50%; }
  100% { left: 150%; }
}