当前位置：首页 > 行业动态 > 正文

html如何制作波浪式跳动的文字

在网页设计中，波浪式跳动的文字可以增加页面的动态感和视觉吸引力，这种效果可以通过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 >这是波浪式跳动的文字</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函数中的相关变量值。

本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/307482.html
0

相关文章

随机文章