CSS 模拟水波文字效果

<template>
	<!-- 定义一个视图容器，作为加载动画的布局 -->
	<view class="loader">
		<!-- 第一个水浪文字元素，设置为透明边框效果 -->
		<span>水浪文字</span>
 
		<!-- 第二个水浪文字元素，应用颜色填充和动画效果 -->
		<span>水浪文字</span>
	</view>
</template>
 
<script>
	
</script>
 
<style>
	/* 设置整个页面背景色为深灰色 */
	body {
		background-color: #212121;
	}
 
	/* 配置加载动画容器样式，使其垂直居中并水平居中对齐 */
	.loader {
		margin-top: 350px;
		/* 垂直居中偏移量 */
		margin-left: 50%;
		/* 水平居中偏移量 */
		position: relative;
		/* 设置相对定位以便子元素绝对定位 */
		width: 200px;
		/* 容器宽度 */
	}
 
	/* 定义在.loader内的所有span标签样式 */
	.loader span {
		position: absolute;
		/* 绝对定位以实现重叠效果 */
		color: #fff;
		/* 文字颜色为白色 */
		transform: translate(-50%, -50%);
		/* 使文字在容器内垂直和水平居中 */
		font-size: 38px;
		/* 设置字体大小 */
		letter-spacing: 5px;
		/* 文字间距 */