css制作波浪线
使用 CSS 线性渐变实现波浪线
通过 linear-gradient 结合 background-size 可以创建重复的波浪线效果。调整角度和颜色停止点可以控制波浪的倾斜方向和粗细。
.wave-line {
height: 2px;
background: linear-gradient(90deg, transparent, transparent 45%, #000 50%, transparent 55%, transparent);
background-size: 10px 100%;
}使用 SVG 内联背景
SVG 可以精确控制波浪曲线的形状，通过 base64 编码嵌入 CSS 背景中实现高清效果。
.svg-wave {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1 Q 5 3 10 1 T 20 1' stroke='%23000' fill='none'/%3E%3C/svg%3E");
height: 2px;
background-size: 20px 100%;
}伪元素动画波浪
通过 ::before 或 ::after 伪元素结合 CSS 动画实现动态波浪线效果。
.animated-wave::after {
content: "";
display: block;
height: 3px;
background: linear-gradient(90deg, #000 25%, transparent 25%) 0 0,
linear-gradient(90deg, transparent 75%, #000 75%) 0 0;
background-size: 30px 100%;
animation: wave 0.5s linear infinite;
}
@keyframes wave {
from { background-position: 0 0; }
to { background-position: 30px 0; }
}使用 border-image 属性
通过 SVG 创建波浪图案，然后应用为边框图像实现特殊边框效果。
.border-wave {
border-bottom: 2px solid transparent;
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='4'%3E%3Cpath d='M0 2 Q 5 0 10 2 T 20 2' stroke='%23000' fill='none'/%3E%3C/svg%3E") 2 round;
}注意事项
- 调整
background-size的宽度值可以改变波浪线的密度 - 修改渐变颜色值或 SVG 的 stroke 属性可改变线条颜色
- 对于动态效果，适当调整动画时间和移动距离可以改变波动速度
- 在高分辨率屏幕上建议使用 SVG 方案保证清晰度
