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即可满足大多数视觉需求。
