css线条特效制作

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-line::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #e74c3c;
  transition: width 0.3s;
}
.hover-line:hover::after {
  width: 100%;
}

SVG路径动画 结合SVG实现复杂路径绘制动画：

<svg viewBox="0 0 100 2">
  <path d="M0 1 H100" stroke="#2ecc71" stroke-width="2">
    <animate attributeName="stroke-dashoffset" from="100" to="0" dur="1s" fill="freeze"/>
  </path>
</svg>

3D立体线条 使用多重阴影和变换创建立体感：

.3d-line {
  height: 4px;
  background: #9b59b6;
  box-shadow: 
    0 2px 0 rgba(155, 89, 182, 0.4),
    0 4px 0 rgba(155, 89, 182, 0.2);
  transform: perspective(100px) rotateX(15deg);
}

虚线流动效果 通过stroke-dasharray实现科技感动画：

.dashed-line {
  stroke-dasharray: 10;
  animation: dash 1s linear infinite;
}
@keyframes dash {
  to { stroke-dashoffset: 20; }
}

实现注意事项

• 性能优化：优先使用CSS动画而非JavaScript
• 响应式设计：使用vw/vh单位确保线条适配不同屏幕
• 浏览器前缀：添加-webkit-等前缀保证兼容性
• 可访问性：确保动画不影响内容可读性

高级效果可结合Canvas或GSAP库实现更复杂的粒子线条效果，基础场景使用纯CSS即可满足大多数视觉需求。