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来创建波浪式跳动的效果，我们需要获取包含文字的元素，并为其添加一个元素，用于存放每个字符，我们需要编写一个函数来生成波浪效果，并将其应用到每个字符上，我们需要设置一个定时器，每隔一段时间调用这个函数，以实现文字的连续跳动。

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函数中的相关变量值。

分享标题：html如何制作波浪式跳动的文字
网页链接：http://www.shufengxianlan.com/qtweb/news28/328678.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联