纯css制作水波纹动画效果字体

原创已于 2025-12-30 11:24:50 修改 · 295 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2025-12-23 14:46:20 首次发布

简介：纯css 不涉及js和canvas等等。

1.上图：

在这里插入图片描述

2、代码：拿走能直接用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水波文本动画</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: "Microsoft YaHei", "SimHei", "Poppins", sans-serif;
			}
			
			body {
				display: flex;
				background: #000;
				min-height: 100vh;
				align-items: center;
				justify-content: center;
			}
			
			.content {
				width: 1200px;
			}
			
			.content h2 {   
				color: #fff;
				font-size: 48px;
				position: absolute;
			}
			
			.content h2:nth-child(1) {
				color: transparent;
				-webkit-text-stroke: 1px #03a9f4;
			}
			
			.content h2:nth-child(2) {
				color: #03a9f4;
				animation: animate 2s ease-in-out infinite;
			}
			
			@keyframes animate {
				0%,
				100% {
					clip-path: polygon(
						0% 45%,
						16% 44%,
						33% 50%,
						54% 60%,
						70% 61%,
						84% 59%,
						100% 52%,
						100% 100%,
						0% 100%
					);
				}
			
				50% {
					clip-path: polygon(
						0% 66%,
						15% 65%,
						34% 66%,
						51% 62%,
						67% 55%,
						84% 45%,
						100% 46%,
						100% 100%,
						0% 100%
					);
				}
			}
		</style>
		<script>
		</script>
	</head>
	<body>
		<section>
			<div class="content">
				<h2>家事国事天下事</h2>
				<h2>家事国事天下事</h2>
			</div>
		</section>
	</body>
</html>

3、思路

这里主要是用到了css 中的clip-path裁剪，把第二个h2（可以是其他的div啊、p啊等等你随意），的上半部分裁剪掉！然后把二个h2覆盖在第一个上面。所以：这个水波纹动画效果其实就是通过两个h2元素叠加实现的！
*

ps:如果觉得波浪太平静，可以去改动画50%里面的数值。

(以下看不看都行，另外的注释)

第一个h2元素（底层）：
- 设置为透明填充： color: transparent;
- 添加蓝色描边： -webkit-text-stroke: 2px #03a9f4;
- 这个元素始终完整显示，作为文字的轮廓
第二个h2元素（上层）：
- 设置为蓝色填充： color: #03a9f4;
- 应用水波纹动画： animation: animate 4s ease-in-out infinite;
- 通过 clip-path 属性动态剪裁，使文字的上半部分在不同时间点被"切掉"
  动画效果是通过 @keyframes animate 实现的，它定义了两个关键帧：