首页 前端知识 css实现宽度自适应的波浪线(动态、静态波浪线)

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

2024-07-22 00:07:57 前端知识 前端哥 549 239 我要收藏

 静态波浪线一:

	<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,") 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='#333'这部分,'#'就是就是#,因此,stroke='#333'其实就是stroke='#333'的意思。例如,我们需要改成红色略带橙色,可以stroke='#F30',也可以写完整stroke='#FF3300'

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14158.html
标签
评论
发布的文章

TEGG学习总结

2024-08-07 00:08:45

ajax笔记二

2024-03-12 01:03:25

jQuery 密码验证

2024-08-07 00:08:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!