css实现宽度自适应的波浪线（动态、静态波浪线）

 静态波浪线一：

	<template>
		<div>
			<wavy></wavy>
		</div>
	</template>


	<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		border: none;
		line-height: 1;
	}

	wavy {
		display: block;
		height: .5em;
		white-space: nowrap;
		letter-spacing: 100vw;
		padding-top: .5em;
		overflow: hidden;
	}

	wavy::before {
		content: "\2000\2000";
		/* IE浏览器实线代替 */
		text-decoration: overline;
		/* 现代浏览器 */
		text-decoration: overline wavy;
	}
	</style>

优点：这种实现方法的优点在于非常容易理解，非常容易上手，然后的话颜色很好控制，使用color属性就好啦。大小也非常容易控制，使用font-size属性就好了。

原理：伪元素生成两个空格，使用letter-spacing属性控制两个空格占据的宽度足够宽，这样空格字符的装饰线的尺寸一定可以充满整个容器，此时只要设置装饰线的类型是波浪线，宽度100%自适应的波浪线效果就实现了。

静态波浪线二、

	<template>
		<div>
			<wavy></wavy>
		</div>
	</template>

	<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		border: none;
		line-height: 1;
	}

wavy {
    display: block;
    height: .5em;
    padding-top: .5em;
    text-align-last: justify;
}
wavy::before {
    content: '\3000\3000';
    text-decoration-style: wavy;
    text-decoration-line: overline;
}
	</style>

优点：利用text-align-last属性，代码更轻便，更容易理解，更优雅

原理就是设置两个空格字符，然后两端对齐，这个时候的波浪线自然就正好横跨整个元素了。

---

动态波浪线一（利用径向渐变纯CSS实现）、

	<template>
		<div>
			<a href="javascript:" class="flow-wave">hover我（移动端按下）</a>
		</div>
	</template>

	<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		border: none;
		line-height: 1;
	}

	.flow-wave {
		padding: 5px 0;
		color: red;
	}

	.flow-wave:hover,
	.flow-wave:focus {
		background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
			radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
		background-size: 20px 20px;
		background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
		animation: waveFlow 1s infinite linear;
	}

	@keyframes waveFlow {
		from {
			background-position-x: -10px, 0;
		}

		to {
			background-position-x: -30px, -20px;
		}
	}
	</style>

动态波浪线二（利用SVG波形矢量图作为背景实现）、

	<template>
		<div>
			<a href="javascript:" class="svg-wave">hover我（移动端按下）</a>
		</div>
	</template>

	<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		border: none;
		line-height: 1;
	}



.svg-wave {
	text-decoration: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%; 
    background-size: 20px auto;
}

.svg-wave {
    animation: waveMove 1s infinite linear;
}
@keyframes waveMove {
    from { background-position: 0 100%; }
    to   { background-position: -20px 100%; }
}
	</style>

 

优点是线条边缘平滑，效果细腻，易理解，易上手，易维护。

缺点也很明显，就是波浪线的颜色无法实时跟着文字的颜色发生变化，适用于文字颜色不会多变的场景。

如果我们想要改变波浪线的颜色也很简单，修改background代码中的stroke='%23333'这部分，'%23'就是就是#，因此，stroke='%23333'其实就是stroke='#333'的意思。例如，我们需要改成红色略带橙色，可以stroke='%23F30'，也可以写完整stroke='%23FF3300'。