在网页设计中，波浪式跳动的文字可以增加页面的动态感和视觉吸引力，这种效果可以通过HTML、CSS和JavaScript来实现，下面将详细介绍如何制作波浪式跳动的文字。
（图片来源网络，侵删）
1、创建HTML结构
我们需要创建一个HTML文件，并在其中添加一个包含文字的元素，我们可以使用<div>元素来包裹文字，并为其添加一个类名wavetext。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>波浪式跳动的文字</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wavetext">这是波浪式跳动的文字</div>
<script src="scripts.js"></script>
</body>
</html>
2、编写CSS样式
接下来，我们需要编写CSS样式来设置文字的初始状态，在这个例子中，我们将文字的颜色设置为白色，字体大小设置为24px，并将其放置在页面的中心位置。
body {
display: flex;
justifycontent: center;
alignitems: center;
height: 100vh;
margin: 0;
backgroundcolor: #333;
}
.wavetext {
color: white;
fontsize: 24px;
}
3、添加JavaScript动画
现在，我们需要使用JavaScript来创建波浪式跳动的效果，我们需要获取包含文字的元素，并为其添加一个<span>元素，用于存放每个字符，我们需要编写一个函数来生成波浪效果，并将其应用到每个字符上，我们需要设置一个定时器，每隔一段时间调用这个函数，以实现文字的连续跳动。
const waveText = document.querySelector('.wavetext');
const spans = waveText.querySelectorAll('span');
let currentIndex = 0;
let isWaving = false;
let waveInterval;
function generateWave() {
const waveHeight = Math.random() * 10 + 5; // 随机波浪高度（515像素）
const waveSpeed = Math.random() * 0.1 + 0.2; // 随机波浪速度（0.20.3秒/次）
const waveDuration = Math.random() * 2 + 1; // 随机波浪持续时间（13秒）
const waveAmplitude = Math.random() * 5 + 1; // 随机波浪振幅（16像素）
const waveFrequency = Math.random() * 0.05 + 0.1; // 随机波浪频率（0.10.5次/秒）
const waveOffset = Math.random() * waveHeight; // 随机波浪偏移量（0波浪高度）
for (const span of spans) {
const progress = (currentIndex / spans.length) % 1; // 计算当前字符的进度
const y = progress * waveHeight waveOffset; // 根据进度计算波浪位置
const scale = Math.sin((progress waveOffset) * waveFrequency) * waveAmplitude + 1; // 根据进度计算缩放比例
span.style.transform = translateY(${y}px) scale(${scale}); // 应用波浪效果
}
}
function startWaving() {
if (!isWaving) {
isWaving = true;
waveInterval = setInterval(generateWave, waveSpeed); // 开始生成波浪效果
} else {
clearInterval(waveInterval); // 如果已经在跳动，则停止生成波浪效果
isWaving = false;
}
}
4、监听鼠标事件并启动动画
我们需要监听鼠标的移动事件，并在鼠标移动时启动动画，这可以通过为waveText元素添加一个mousemove事件监听器来实现，当鼠标移动时，我们调用startWaving函数来启动动画，当鼠标停止移动时，我们再次调用startWaving函数来停止动画，这样，我们就可以实现鼠标移动时文字跳动的效果。
waveText.addEventListener('mousemove', () => {
currentIndex = (currentIndex + 1) % spans.length; // 更新当前字符索引
startWaving(); // 启动动画
});
至此，我们已经完成了波浪式跳动的文字的制作，你可以将这些代码保存到一个HTML文件中，并在浏览器中打开该文件查看效果，如果需要调整波浪效果的参数，可以直接修改generateWave函数中的相关变量值。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/431586.html
微信扫一扫